IOTBS Manual

Step 1: Choose a mode and interface

The first step is simply to make two decisions:

select the interface you want
choose an implementation mode

The choices you make here affect every other step of the setup process, which is why we have to do this first. If it all seems a little confusing right now, the simplest configuration is an Original interface in "standard" mode (which was IOTBS v1.0); if you start with that, you'll always be able to change it later.

Interfaces

The script is available in a choice of three interfaces, each of which generates the switching controls as a different kind of HTML:

Original: Generates forms and selectors
The Director's Cut: Generates definition-lists and links
The Radio Edit: Generates forms, legends and radios

None of them are intrinsically "better" than any other - it's up to you to decide which has the best semantics, behaviour or appearance for your situation. In our opinion, the form-based interfaces are the most semantically-correct, but The Director's Cut offers the richest styling possibilities.

Implementation modes

The script can then be used in one of three implementation modes, which control how the basic switching mechanism works:

Standard body-class switcher ("standard mode"): This is the classic IOTBS technique of using multiple class names on the <body> element, for CSS rules kept in a single stylesheet (or any other convenient arrangement).
Load stylesheets on-demand ("load mode"): With this configuration, the switching mechanism works off one <link> element per group, and loads new stylesheets into those, as required. This allows for situations where each option uses a large number of rules - more than you would want to load all at once.
Load stylesheets and integrate with native switching ("integrate mode"): This configuration is an extension of load mode, and allows you to nominate one of your switching groups to integrate with native (browser-based) stylesheet switching. For that particular group the stylesheets no longer load on-demand, since they're all already included on the the page; they're implemented with traditional "alternate stylesheet" semantics, and switched by toggling their disabled properties.