The CSS Anthology, Second Edition

The CSS Anthology288

}

var cookie = readCookie("style");

var title = cookie ? cookie : getPreferredStyleSheet();

setActiveStyleSheet(title);

The new style selection links appear in the top right-hand corner in Figure 8.8.

Figure 8.8. Changing the style sheet with JavaScript

Discussion

Adding a JavaScript style switcher to your site gives all users with JavaScript support

the ability to choose the style sheet that best suits their needs.

This solution makes use of JavaScript functions from an A List Apart article entitled,

“Alternative Style: Working With Alternate Style Sheets.”

10

After you save the

10

http://www.alistapart.com/articles/alternate/

289Accessibility and Alternative Devices

functions to your site as switcher.js, all you need to do is link in the file, and add

links or buttons to call the JavaScript:

alternative-stylesheets-js.html (excerpt)

<script language="javascript" type="text/javascript"

src="switcher.js"></script>

alternative-stylesheets-js.html (excerpt)

<ul id="styleswitch">

<li><a href="javascript:;"

onclick="setActiveStyleSheet('default'); return false;"

>Default Style</a></li>

<li><a href="javascript:;"

onclick="setActiveStyleSheet('large text'); return false;"

>Large Text</a></li>

</ul>

The setActiveStyleSheet function selects the style sheet to be applied. By calling

it with the title of the desired style sheet, we can allow users to select style sheets

from within the browser. As such, this technique can be used in conjunction with

that described in “How do I add alternative style sheets to my site?”. Visitors who

are able to change style sheets using their browser can still do so; others can use

the JavaScript style switcher.

You can also use this technique to change a site’ s color scheme, and even its layout,

provided you used CSS to position the page elements.

Server-side Solutions

It’ s also possible to allow users to change your site’s style sheet by writing out the

link to the selected style sheet using server-side code, such as PHP. Examples of

the methods you can use to achieve this are linked to from the css-discuss Wiki.

11

11

http://css-discuss.incutio.com/?page=StyleSwitching