Alternate Stylesheets

By Brandon Cash
2005-06-23


Alternate Stylesheets

Firstly, I'll start off by saying that this technique is only supported in the newest browsers, like Mozilla Firefox. If you've ever gone to a webpage and noticed a little palette appear in the bottom left, this is to switch stylesheets.

This can be achieved in another way, however, if the browser cannot handle the alternate stylesheets. That way would be to change the current style sheet (default) to one of the alternate files, server-side. That is, keep track of which style the user wants and then load that stylesheet. You can see an example of this on caiPHP.com, click on any of the styles in the menu.

The code is very simple. To display a default stylesheet, we would use something like<link rel="stylesheet" href="default.css" type="text/css" title="Default" media="all" />. Then, to add an alternate stylesheet, we use <link rel="alternate stylesheet" href="alternate.css" type="text/css" title="Alternate" media="all" />

With that out of the way, we can now look into methods to switch these server-side, in case the client cannot handle it. There are two basic methods of associating information with a specific user: cookies and sessions. If you already have a session running on your page, it will make your life much easier. If not, a cookie may suite your needs better. With a session, all we need to do is store the variable in one of the session variables:$_SESSION['style'] = 'alternate';

Of course, we would then just as easily put that back into our <link> tag:<link rel="stylesheet" href=".css" type="text/css" title="Default" media="all" />

If you want to use a cookie, it's probably best to set one that will expire when the browser is closed:setcookie('style', 'alternate');. Then just use $_COOKIE['style'] in place of the session variable above.

This is a very quick and easy change to a webpage that adds a lot of neat functionality. I doubt you would see anything like this on a business page (unless, of course, it's for design or programming, perhaps), but you can see this done on many other pages. If you're interested in some major stylesheet changing, check out the CSS Zen Garden.

Tutorial Pages:
» Alternate Stylesheets

Related Tutorials: » Planning Your Stylesheet - The Definitive Guide » CSS Shorthand Properties » Print Stylesheet - The Definitive Guide » Using CSS Selectors to Highlight Unedited Form Fields » An Introduction to CSS » Overlapping tabbed navigation in CSS