Switching Style Sheets (Part II)

In the previous post i tried to setup the knowledge foundation in creating dynamically switching style sheets. I discussed the three different relationships that external style sheets have to your document: persistent, preferred and alternate.

So how does the style sheet switching mechanism work? When a web document is initially loaded, the persistent and preferred style sheets are applied to the document. Alternate style sheets can be selected by the user to change the formatting of the page. According to the W3C, this style sheet switching should be done through the browser, through a browser feature. While Mozilla (Firefox and Semonkey) and Opera browsers provide this feature, Internet Explorer unfortunately does not. So we end up with alternate style sheets but no way of accessing them through Internet Explorer.

With Javascript along with the DOM, we can create a script to provide a cross-platform way for users to select the style sheet that they want to use. In order not to break the style switcher feature of Mozilla browsers, we should use the link tags according to the rules of the W3C. Then we can use cookies to store the users’ style sheet preference. This way, the choice is reflected in the whole site and not just in one page.

Now that I have explained the background of style sheet switching, I will discuss next how to implement the actual Javascript.

Go back