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 sites color scheme, and even its layout,
provided you used CSS to position the page elements.
Server-side Solutions
Its also possible to allow users to change your sites 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

Get The CSS Anthology, Second Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.