By Laurence Veale
As well as adding a powerful 'WOW!' factor, this technique can also provide great accessibility benefits to your site. While I'll use PHP to illustrate this technique, the concepts are simple enough to be applied to other languages such as ASP, Java or even client-side JavaScript.
One Stylesheet to Rule them All
Generally, we have one main stylesheet that controls the look and feel of our (X)HTML.
<link rel="stylesheet" type="text/css" href="/style/default.css" media="screen" />
Within this stylesheet, we commonly set rules for the appearance and, perhaps, layout of headings, paragraphs, navigation menus and other elements in the page.
We may even have gone so far as to use a separate stylesheet for printing:
<link rel="stylesheet" type="text/css" media="print" href="style/print.css" />
Colours of the Rainbow
Why not give your visitors a choice of styles? Of course, there is already a well-established method by which we can supply alternate stylesheets:
<link rel="alternate stylesheet" type="text/css" media="screen" href="style/green.css" title="green"/>
<link rel="alternate stylesheet" type="text/css" media="screen" href="style/white.css" title="white"/>
<link rel="alternate stylesheet" type="text/css" media="screen" href="style/orange.css" title="orange" />
However, there are a few known drawbacks to this technique:
- Many modern browsers (including Internet Explorer) are unable to access the alternate stylesheets.
- Style selection is stateless: the visitor's choice is not remembered from one visit to the next, nor from page to page.
An Alternative Approach
The alternative solution involves three steps:
- The users select their preferred style -- they click a hyperlink or choose an option from a dropdown list.
- The server-side script reads the visitors' selection and sets a cookie on their machine to record that selection.
- On every subsequent visit, this cookie is recalled by our server-side script and the perferred stylesheet is selected accordingly.
Let's look at each of these steps in detail.
- Choose the Preferred Style
1420_stylechoice (click to view image)
We use the following links to reflect each stylesheet option.
<a href="http://www.sitepoint.com/stylechanger.php?style=green"><img src="greensq.gif" alt="green"/></a><a href="http://www.sitepoint.com/stylechanger.php?style=white"> "><img src="whitesq.gif" alt="white"/></a><a href="http://www.sitepoint.com/stylechanger.php?style=orange"> "><img src="orangesq.gif" alt="orange"/></a>
- Yummy, Cookies!
The stylechanger.php file contains the following code:
<?php
$theStyle = $HTTP_GET_VARS["style"]; /* querystring */
setcookie("style", $theStyle, time()+36000, "/", "");
header("Location: $HTTP_REFERER");
exit;
?>All the above code does is get the selected style that was passed in the
querystring(style=green/white/orange) and write that choice to a cookie on the visitor's PC. Easy! - Trend-Setting
From now on, we'll need to add the following code to any page on which we want to implement the visitor's style selection:
<?php
$styleCookie = $HTTP_COOKIE_VARS["style"];
switch($styleCookie)
{
case "white":
case "orange":
break;
case "green":
case "":
$styleCookie = "default";
break;
}
$styleSheet = "<link rel=\"stylesheet\" type=\"text/css\" href=\"/style/$styleCookie.css\" media=\"screen\" />\n";
echo $styleSheet;
?>This section of code reads the cookie stored in the user's browser. If it's either 'white' or 'orange', we'll hardcode that stylesheet into the header. On the other hand, if the cookie is blank (i.e. no cookie is present) or green, we'll use our default stylesheet -- in this case, the green one.
The default green stylesheet renders the page like so:
1420_green (click to view image)
And that's it... almost!
Our 'default.css' stylesheet contains the default set of rules that describe the appearance of our page, while our alternate stylesheets, as the name implies, contain the rules that produce alternate views of those pages. Is it really necessary to repeat all of those default rules in each alternate stylesheet?
At Risk of Repetition
No, we don't need to repeat all the default rules in each stylesheet. CSS provides the @import directive, which we can now employ to great effect.
We'll add the following to the top of our alternative stylesheets:
@import url("default.css");
This will include the default stylesheet in the alternate stylesheet, so we need only to override the specific page elements that we want to change.
For example, to set the page elements marked with the 'menu' class to a nice orange colour, we'd add the following to our stylesheet.
@import url("default.css");
.menu
{
background: #E5B786 /* nice orange */
}
In essence, this page will display the default styles, with the exception of any element that's marked with the 'menu' class.
Our alternative orange stylesheet makes the menu display like this:
1420_orange (click to view image)
We can overwrite any element in the default CSS and change its look completely -- it's just a matter of choice.
Other Uses
Until now, many developers have tended to employ this technique for fancy uses, but it can deliver real benefits in the area of accessibility.
For example, our default CSS could contain the following:
body{ font-size: 100%;}
We could then add an alternative stylesheet with increased text size for those who are visually challenged, like so:
Plus20.css could contain: @import url("default.css");
body{ font-size: 120%;}
}
Simple!
