A simple approach for alternative styles

When we enhance the markup with style, we make choices and assumptions about what we think looks good. We pick fonts, sizes and colors that look good to us. However, recognizing that beauty is in the eye of the beholder, it is often desirable to allow users to choose from a palette of available styles to apply to the documents. The choices are pretty open, and include giving the user access to styles of the page that are themed in interesting ways, provide alternative layouts (for printing, for example) or assist accessibility concerns by providing high contrast colors and large fonts.

Bring a little color to those gray, rainy winters in Seattle, and give your users/readers a treat. This post walks through how you can build different style themes for a web site without driving yourself nuts.

Let’s talk about the relationship

There are three different relationships external stylesheets (those defined using the link tag) can have with the document, as follows:

Persistent stylesheets are always enabled (they are always on) and are combined with the active stylesheet. They can be used for shared rules common to every stylesheet. To make a stylesheet persistent, the rel attribute is set to stylesheet and no title attribute is set.
Preferred stylesheets are enabled by default (they are on when the page is loaded), but they can be disabled if the user selects an alternate stylesheet. To make a stylesheet preferred, the rel attribute is set to stylesheet and the stylesheet is named with the title attribute.

Several preferred stylesheets can be grouped together by giving them identical title attributes. These grouped stylesheets are then all enabled and disabled together. If more than one group of preferred stylesheets are declared, the first group takes precedence.

Alternate stylesheets can be selected by the user as alternatives to the preferred stylesheet. To specify an alternate stylesheet, the rel attribute is set to “alternate stylesheet” and the stylesheet is named with a title attribute. As with preferred sheets, these stylesheets can also be grouped together by giving them identical title attributes.

When a document is loaded, the persistent and preferred stylesheets are applied. The alternate stylesheets can then be selected by the user.

HTML for Alternative Styles

<html>
<head>
<link rel="stylesheet" type="text/css" href="site.css" title="default theme" />
<link rel="alternative stylesheet" type="text/css" href="red.css" title="red theme" />
<link rel="alternative stylesheet" type="text/css" href="blue.css" title="blue theme" />
</head>
<body>
<div>
document content
</div>
</body>
</html>
Download this code: /code/alt_styles_01.html

Key points

We’ve defined each of the available stylesheets using the link tag.
We’ve set the value for the rel attribute to “alternative stylesheet” for the non-default choices.
We’ve added a title attribute to each link tag so that they can be identified by name for the user.

The default stylesheet, site.css, will always be downloaded and used by the browser in rendering the page. The alternative stylesheets will be downloaded and ignored until they are activated by the user. When activated, they will participate in the CSS cascade according to the order they are defined in the document.

Instant support in Mozilla

Mozilla is the first browser to provide a feature by which users can choose alternative stylesheets. Simply open the page in Mozilla and use the small icon in the bottom left corner of the window to see a list of alternative styles (using the title values we’ve defined as names) and choose which to apply.

Script-driven support for other browsers

Until other browsers provide native support for alternative stylesheet selection, a script-driven solution is required. This can be achieved by calling a simple function, passing the title of the corresponding link, such as in the following HTML:

<a href="/setstyle.aspx" onclick="setStyle('red');">
Change to Red Theme
</a>
Download this code: /code/alt_styles_02.html

We set the href to a url that can persist the user’s choice server-side (assuming that such an approach is available and that we can determine which css file to point to using server-side logic as well). This is our fallback case for users accessing the site without script supported or enabled. Then we set the onclick attribute to the javascript routine to run which changes the stylesheet and writes the cookie client-side. So users with scripting get an enhanced experience without the round trip. In cases where a fallback is not possible, setting href="javascript:void(0);" is safe to do nothing. However, at that point, you may want to consider using document.write for the links, since no-script users will see the links but be unable to use them.

As a commenter points out, the javascript: prefix is only used for the href attribute, not the script event attributes.

setStyle function

function setStyle(title) {
var i, link;
var links = document.getElementsByTagName("link");
for(i=0; i<links.length; i++)
{
link = links[i];
if (link.getAttribute("rel").indexOf("style") != -1 && link.getAttribute("title"))
{
link.disabled = true;
if (link.getAttribute("title") == title)
{
link.disabled = false;
}
}
}
return false;
}
Download this code: /code/alt_styles_01.js

Adding persistance

Of course, it’s of little value to allow the user to choose an alternative stylesheet if their choice does not persist between visits. This can be done by simply writing a cookie in window.onunload and reading for it in window.onload, or using various server-side state persistance approaches.

...and it’s Fast!

Since the switching is done client-side, the change happens instantly, without the need for downloading the entire page.

Visitor comments

2 comments

“This site provides alternative stylesheets like this article discusses. ”

I guess this was on an older version of this site?

» by eglasius on Jul 14, 2005 at 04:21 PM | #

You caught me, eglasius! I’ve redesigned my site a bit since writing this article (and I wrote about the redesign a bit under the TextPattern category of articles) and I haven’t had a chance to adjust and reapply the themes. I’ve been thinking about slight tweaks to this implementation, so look for a (re)introduction of the themes a bit down the line. Thanks for stopping by, and especially for keeping me honest :)

» by Daniel Boerner on Jul 17, 2005 at 07:33 PM | #

This post is closed to new comments. Thanks to everyone who commented.