///Alternate Stylesheets

Alternate Stylesheets

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.

2010-05-25T23:16:47+00:00 June 23rd, 2005|CSS|0 Comments

About the Author:

Brandon is a young web developer who puts emphasis in new web standards
and all the best practices.  Working mostly in open source projects of
his own, he has come to a great understanding with PHP, and helps others
to reach an understanding of their own.

Over the years as a web developer and software tinkerer, he has learned
new ways to overcome previously impossible tasks and still learns with
every large project.  He considers the web a constantly changing
environment, and has adapted to fit it.

Leave A Comment