Step 3: Include the scripts and style sheets
The scripts and stylesheets
must all go in the
The scripting is split into multiple files; you need three for any given setup:
The first script is the configuration file,
which is called
"iotbs2-key.js"by default, but can be called anything you like
The second script is different for
each of the interfaces: the
The Director's Cutuses
The Radio Edituses
The third and final script is the core functions,
which is always the same whatever configuration you're
The script includes must be in that order, or it may not work correctly. So a typical installation would look like this:
Please note: This is a change from Version 2.0, in which the core functions came before the interface script.
stylesheets will be
included using either a single
(for standard mode), or multiple
elements (for load or integrate mode).
We'll look at how to structure the CSS rules themselves later on (in the final step), but for now we're only concerned with how the stylesheet files are included on your HTML pages.
In standard mode you can keep all the rules in a single
stylesheet, included using any method you want.
Remember that since the stylesheet will have
rules for multiple media types, it needs to be
included with the
(which is the default value if none is specified).
Here's an example:
<style type="text/css" media="all"> @import url(iotbs.css); </style>
You're not required to use only one stylesheet - the flexibility of standard mode allows you to structure the stylesheets and includes any way you want.
However you are required to include all of them at the same time. If you don't want to do that - if you'd rather have the rules for each option only loaded as required - you'd be better off using load mode ...
If you're using load mode, each
switching group will need its own
<link> element. Both the
ID of the elements, and the
href and filename of the stylesheets themselves,
must be defined according to a strict naming convention.
First let's have a look at some final code, for the screen and print switchers we made containers for earlier:
<link rel="stylesheet" type="text/css" media="screen" id="screen-switcher-stylesheet" href="stylesheets/screen-switcher-default.css" /> <link rel="stylesheet" type="text/css" media="print" id="print-switcher-stylesheet" href="stylesheets/print-switcher-default.css" />
You can see from that example how the naming convention works:
is made from the switching group
href value is made from
the path to the stylesheets' folder
(they must be in a separate folder, as we'll see in the
plus the switching group's container
<link> href always specifies the
default stylesheet for that group -
All the other stylesheets in the group follow the same
naming convention: the group container's
"-", plus the
class name of that option,
So in the case of our screen switcher,
the additional stylesheets would be called
for our print switcher they'd be
Additional stylesheets are not hard-coded into the page - they'll be
loaded into the relevant
Load mode stylesheets
must always use
(even though the spec allows for loading and switching using
other methods, these are not supported
The stylesheets also must have the extension
(although this could be configurable if there's demand for such a feature?)
Finally, load mode stylesheets should come after all other stylesheets on the page, or their rules may not have enough specificity. (If you do have problems with specificity !important can be your friend; and it has no accessibility issues either, now that CSS 2.1 has sorted out how user/author precedence is supposed to work :-))
Integrate mode begins with exactly the same setup as load mode (so please review that section first, if you haven't done so already).
After that's implemented, you can nominate one of your switching groups to integrate with native stylesheet switching. We'll see how to configure the script in the next step, but for now you simply need to decide which one it is - it's probably most likely to be useful if you pick a group related to screen-media styles.
Once you have decided, identify the applicable
<link> element and give it a
(which is required for native switching).
This element is now the "preferred" stylesheet for that group.
Then add additional
for each of the "alternate" stylesheets you want in that group.
Each of these should have a different
href to the corresponding stylesheet
(according to our
naming convention), and the
So, using our earlier example again, the includes would look like this:
<!-- Integrated screen-media styles --> <link rel="stylesheet" type="text/css" media="screen" id="screen-switcher-stylesheet" title="Normal contrast" href="stylesheets/screen-switcher-default.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="High contrast" href="stylesheets/screen-switcher-high.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="High visibility" href="stylesheets/screen-switcher-highvisibility.css" /> <!-- IOTBS print-media styles --> <link rel="stylesheet" type="text/css" media="print" id="print-switcher-stylesheet" href="stylesheets/print-switcher-default.css" />