IOTBS Manual

Step 3: Include the scripts and style sheets

The scripts and stylesheets must all go in the <head> section.

Script includes

The scripting is split into multiple files; you need three for any given setup:

  1. The first script is the configuration file, which is called "iotbs2-key.js" by default, but can be called anything you like
  2. The second script is different for each of the interfaces: the Original version uses "iotbs2-original.js"; The Director's Cut uses "iotbs2-directors.js"; and The Radio Edit uses "iotbs2-radio.js"
  3. The third and final script is the core functions, which is always the same whatever configuration you're using, called "iotbs2-core.js"

The script includes must be in that order, or it may not work correctly. So a typical installation would look like this: 

<!-- Invasion of the Body Switchers by Brothercake and Malarkey -->
<script type="text/javascript" src="iotbs2-key.js"></script>
<script type="text/javascript" src="iotbs2-directors.js"></script>
<script type="text/javascript" src="iotbs2-core.js"></script>

Please note: This is a change from Version 2.0, in which the core functions came before the interface script.

Style sheets

The IOTBS stylesheets will be included using either a single <link>, <style> or <?xml-stylesheet?> (for standard mode), or multiple <link> 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.

Standard mode

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 media attribute "all" (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 ...

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:

The <link> element ID is made from the switching group container's ID, plus "-stylesheet": 

id="screen-switcher-stylesheet"

The href value is made from the path to the stylesheets' folder (they must be in a separate folder, as we'll see in the next step), plus the switching group's container ID, plus "-default.css": 

href="stylesheets/screen-switcher-default.css"

The <link> href always specifies the default stylesheet for that group - such as "screen-switcher-default.css" or "print-switcher-default.css"

All the other stylesheets in the group follow the same naming convention: the group container's ID, plus "-", plus the class name of that option, plus ".css"

So in the case of our screen switcher, the additional stylesheets would be called "screen-switcher-high.css" and "screen-switcher-highvisibility.css"; for our print switcher they'd be "print-switcher-small-sans.css" and "print-switcher-large-serif.css".

Additional stylesheets are not hard-coded into the page - they'll be loaded into the relevant <link> elements as required.

Load mode stylesheets must always use <link> elements; (even though the spec allows for loading and switching using other methods, these are not supported by IOTBS). The stylesheets also must have the extension ".css" (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

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 title attribute (which is required for native switching). This element is now the "preferred" stylesheet for that group.

Then add additional <link> elements for each of the "alternate" stylesheets you want in that group. Each of these should have a different title, an href to the corresponding stylesheet (according to our naming convention), and the rel attribute "alternate stylesheet".

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" />

← Add the XHTML containers | Configure the JavaScript →

IOTBS Manual

This is the developer's manual for IOTBS v2.1:

  1. Choose a mode and interface
  2. Add the XHTML containers
  3. Include the scripts and style sheets [this page]
  4. Configure the JavaScript
  5. Write the CSS

← IOTBS Main Page

Categories...

Components

Parts for other scripting:

Website gadgets

Bits of site functionality:

Usability widgets

For enhancing usability:

Images

Image manipulation scripts:

Local network apps

Web-applications for your home or office network:

Game and novelties

More amusing than useful:

Our internal search engine is currently offline, undergoing some configuration changes in preparation for a major site overhaul. In the meantime, you can still search this site using Google Custom Search.

In this area

Main areas

[brothercake] a round peg in a square hole, that still fits