Style Switcher
Introduction
After creating HTML based upon best practices in web standards, a total separation between content and layout/style should be achieved. At this point you probably only have one screen stylesheet, your default design. However, more, completely different designs can easily be layed over the existing HTML.
This article documents how a user can change between these different designs or stylesheets, and the best cross-browser solution.
Applying Stylesheets
A stylesheet can be applied to a site using the <link> element within the <head> of the document.
However, an external, linked stylesheet can take three different relationships with the site. These are persistent, preferred and alternate.
Persistent
These stylesheets are always applied to the page and are combined with the active stylesheet. Persistent stylesheet links lack a title attribute.
<link rel="stylesheet" type="text/css" href="style.css" />Preferred
Stylesheets with the same title attribute are applied to the page but are disabled when an alternative stylesheet is applied. If there are numerous preferred stylesheets, the first stylesheet takes precedence.
<link rel="stylesheet" type="text/css" href="style.css" title="default" />Alternate
These stylesheets can only be selected by the user as an alternative to the preferred stylesheet. The persistent stylesheet
is still applied. An alternative stylesheet can be applied by prefixing "alternate" to the rel attribute.
These alternative stylesheets can be grouped, in the same way as the preferred stylesheets, with the same title attribute.
<link rel="alternative stylesheet" type="text/css" href="style.css" />The examples assume the file style.css is in the same folder as the HTML document.
Changing Stylesheets
The persistent and preferred stylesheets are applied when the document is initially loaded. The alternate stylesheets can be selected by the user.
A document may have more than one style sheet associated with it, and users should be able to select from alternative style sheets.
In Mozilla Firefox users a presented with the following icon, 
in the status bar when alternate stylesheets are available. Clicking this icon will show a list of titled (preferred & alternate) stylesheets
which can be applied. Users can also navigate to the Page Style menu, under View in the main menu, here they can choose the same stylesheets as
well as completely disable them all, defined as "No style".
In the Mozilla suite browser users can navigate to the User Style menu, under View in the main menu. The menu presented is the same as in Mozilla Firefox. The "Basic Style" option completely disables all stylesheets.
In Opera users can access the stylesheet list by either navigating to the Style menu via View in the main menu or via the camera icon on the address bar.
However, Microsoft Internet Explorer does not provide any means of selecting an alternative stylesheet, only to completely disable styles.
The Solutions
To enable all browsers to switch stylesheets, methods must be implemented by the web developer. There are two solutions to this problem involving two different approaches, using two different scripting methods but achieve the same outcome.
Javascript
Javascript is a client side scripting language. This means it is activated and applied when the page is loaded and can easily be turned off by the user. The user change run client side scripts without having to reload a web page. The developer has no control over the users settings so can not guarentee the success of the script, or whether it would be activated at all.
Serverside
Serverside technologies include PHP, ASP and Perl. This solution requires the user to reload a web page to run the script. However, with serverside solutions, the web developer can guarentee the success of the script. This article concentrates on PHP, however could be applied quite easily to the other technologies.
Cookies
Nope, not the type you can eat unfortunately.
Cookies are small text files that Web sites place in your computer to help your browsers remember specific information
In these solutions the cookie is used to stored the user-desired stylesheet. Cookies are used with both methods and must be enabled for either method to work.
Style This
This website uses the PHP style switcher discussed above. This sites style sheet changer can be accessed via the colophon section at the bottom of the page or via this the following link - http://university.trovster.com/final/colophon/#style_changer.
Further Reading & Resources
Below are resources I used for this article and would be interesting further reading on the subject.
- Build a PHP Switcher
-
For your style-sheet-switching pleasure, A List Apart offers the Switcher, a piece of JavaScript that dynamically changes page styles. Functional as it is, it quite unfortunately relies on the user to have both JavaScript and cookies enabled. There's not much we can do about the cookies, but we can sidestep client-side processing with a little help from PHP.
- Alternative Style: Working With Alternate Style Sheets
-
We have several style sheets and the visitor can choose their favorite from a menu. But then we encounter a problem. A major one. Mozilla provides a menu to select the style sheet we want to use under the view menu item. But Microsoft Internet Explorer (MSIE) provides no such menu. So we have several style sheets, and no way to acces them in MSIE.