As more and more sites move away from embedded style tags (<font> tags, for example), the benefits of CSS to customize a user's visit has become all the rage. It's hard to find a site bragging about its use of XHTML and CSS for layout that doesn't have a style switcher of some sort stuffed into a corner like some unruly hamster.

Some of the sites that heavily advocate using CSS for all presentation even provide some handy scripts to allow your users to switch between styles. A List Apart featured two such articles; Alternative Style: Working with Alternate Style Sheets and A Backward Compatible Style Sheet Switcher.

Unfortunately, both of these tutorials require client-side scripting in order to work. No matter how backward-compatible or user-friendly the techniques used, if you have JavaScript disabled, it's a no-go. Granted, if you don't have access to a server-side scripting language, its cut-n-paste ease is undeniable, but to both handle for users without JavaScript enabled (but who can still support CSS), or even later versions of browsers where it's all too possible for JavaScript support may get wonky, I've created a very simple server-side method to switch styles.

The Concept

The concept is very simple, really. A user comes to the site and he or she sees the default style that you've specified. If, however, the user has been to the site before and chose a different style, you want the site to accept it. Short of storing a user profile for every user and dealing with the hassle of letting users log in to see custom styles, the next approach would be to simply store the preferences within a cookie. So, if there's a cookie with a style set, the site uses it, otherwise it uses the default. Simple.

How you choose to display these options, however, should be up to you. The script samples given will allow you to use form elements (radio buttons or a select menu, for example) or simple hyperlinks.

Code Samples

Those of you familiar with my font sizing article from way back in 1999, Give the User Control Over Your Fonts, may recall that I used a set of three buttons to allow a user to cycle through three stylesheets with different type sizes for each selection. Well, we're just going to repurpose that code. Back then, we talked about browser detection so you could display the option only to those who could use it. I'm skipping that for now, since your average site doesn't care too much, and there are many other and better scripts out there that you can customize to do your browser detection for you.

This block of code first checks to see if a style has been selected by the user, and if not, it checks to see if there is a cookie with the CSS style. Failing both of those it writes the default value to the cookie and then to the <link> element that calls the CSS file. So, on a user's first visit, it will still show the default style. If the user has cookies disabled, he or she will simply see the default style regardless of what he or she selects, although you can add a cookie detection script in here if you wish to hide the option. Make sure this sits at the top of your document, before any HTML/XHTML is written to the browser. Note that I've called the cookie cCSS, which ideally will demonstrate to users with cookies enabled that, with the associated value, the cookie is nothing more than a harmless style preference.

I'd recommend you make the below chunk of script into an include so you can re-use it all over your site.

'##############################################################################

'# styleswitcher.asp Version 1.0 #

'# Created 26/5/2002 Last Modified 26/5/2002 #

'##############################################################################

'# COPYRIGHT NOTICE #

'# provided below. #

'# #

'# styleswitcher.asp may be used and modified free of charge by anyone so #

'# long as this copyright notice and the comments above remain intact. By #

'# using this code you agree to indemnify Adrian Roselli from any liability #

'# that might arise from it's use. #

'# #

'# This script is released under the GPL. #

'# Selling the code for this program or any derivative work is expressly #

'# forbidden. A full copy of the GPL can be found in the Code section of #

'# http://evolt.org. In all cases copyright and this header must remain #

'# intact. #

'##############################################################################

'# Set the name of the current script to variable so you

'# can use this script on any page of your site

strScriptName = Request.ServerVariables("SCRIPT_NAME")

'# First check the cookie value to see if anything has

'# already been selected.

'# Then, request the style from the entire Request collection,

'# so it could come from a form submission, or an appended

'# URL.

cCSS = Request.Cookies("cCSS")

rCSS = Request("rCSS")

'# If there is a style, write it to the cookie with any

'# arbitrary date in the future so it sticks, and set the

'# value for fCSS, our final variable from all this.

IF NOT rCSS = "" THEN

'# Set the cookie to what came in from the request.

Response.Cookies("cCSS") = rCSS

Response.Cookies("cCSS").expires = #10/10/2003#

'# Set the final value equal to what came in from

'# the request collection.

fCSS = rCSS

'# If there is no style selected by the user...

ELSEIF rCSS = "" THEN

'# ...and the cookie is blank, write the default.

IF cCSS = "" THEN

Response.Cookies("cCSS") = "default"

cCSS = "default"

END IF

'# Now set the final variable to the default value

'# we've just set above.

fCSS = cCSS

'# Finally, set the rCSS value in case you have a form

'# that relies on it to draw the selected value.

rCSS = fCSS

END IF

Now that you've created the value for the stylesheet to display, you might as well have the page select the right one. This works best if the value you used in your form or hyperlink is the filename, sans the extension, of the CSS file you wish to call:

<link rel="stylesheet" href="/<% = fCSS %>.css" media="all" type="text/css"/>

Now, further down the page you actually want to give the user a means by which to select a style. The examples I'll show are a select menu, a set of radio buttons, and some text links. The text links could easily be modified to become images, so I'll leave out images for the scope of this example.

Select Menu

Unfortunately, the select menu requires a click to see all the options, and then a click to select one. It does not, however, fire without a submission click, which alleviates the hassle of users missing their target, although it does bring it up to three clicks. You can always add an onchange if you so desire, however.


<form action="<% = strScriptName %>">
<p><strong>Got CSS?</strong></p>
	<select name="rCSS" id="rCSS">
		<option value="default"<% IF rCSS = "" OR rCSS = "default" THEN %> selected="selected"<% END IF %>>Default</option>
		<option value="heaven"<% IF rCSS = "heaven" THEN %> selected="selected"<% END IF %>>Heaven</option>
		<option value="hell"<% IF rCSS = "hell" THEN %> selected="selected"<% END IF %>>Hell</option>
		<option value="evolt"<% IF rCSS = "evolt" THEN %> selected="selected"<% END IF %>>evolt.org</option>
		<option value="stealth"<% IF rCSS = "stealth" THEN %> selected="selected"<% END IF %>>Stealth</option>
		<option value="none"<% IF rCSS = "none" THEN %> selected="selected"<% END IF %>>None</option>
	</select>
	<br/>
	<input type="submit" name="" value="Style Me!"/>
</form>

Which will look like this:

Got CSS?

Radio Buttons

This option takes up more space on the page, but presents all the options to the user at once. It's a two-clicker to get a new style in place, and as above, doesn't rely on JavaScript to submit the form, so the user must click the submit button. Make sure you keep the <label> elements in place to provide a larger hit state for those browsers that support it.


<form action="<% = strScriptName %>">
<p>
<strong>Got CSS?</strong><br/>
	<input type="radio" name="rCSS" id="rCSS_default" value="default"<% IF rCSS = "" OR rCSS = "default" THEN %> checked="checked"<% END IF %> /><label for="rCSS_default">Default</label><br/>
	<input type="radio" name="rCSS" id="rCSS_heaven" value="heaven"<% IF rCSS = "heaven" THEN %> checked="checked"<% END IF %> /><label for="rCSS_heaven">Heaven</label><br/>
	<input type="radio" name="rCSS" id="rCSS_hell" value="hell"<% IF rCSS = "hell" THEN %> checked="checked"<% END IF %> /><label for="rCSS_hell">Hell</label><br/>
	<input type="radio" name="rCSS" id="rCSS_evolt" value="evolt"<% IF rCSS = "evolt" THEN %> checked="checked"<% END IF %> /><label for="rCSS_evolt">evolt.org</label><br/>
	<input type="radio" name="rCSS" id="rCSS_stealth" value="stealth"<% IF rCSS = "stealth" THEN %> checked="checked"<% END IF %> /><label for="rCSS_stealth">Stealth</label><br/>
	<input type="radio" name="rCSS" id="rCSS_none" value="none"<% IF rCSS = "none" THEN %> checked="checked"<% END IF %> /><label for="rCSS_none">None</label><br/>
	<input type="submit" name="" value="Style Me!"/>
</p>
</form>

Which will look like this:

Got CSS?

Default

Heaven

Hell

evolt.org

Stealth

None

Good Ol' Fashioned Hyperlinks

Sometimes a form is just a waste of clicks and totally unnecessary. In those circumstances, you want your script to support hyperlinks, and you want it to show the selected style as well. Here is some very basic code to handle that. I've set the script to insert an inline style of bold for the selected sylesheet. You can modify that or create a more robust method to style the selected option.


<p>
<strong>Got CSS?</strong>
</p>
<ul>
 <li><a href="<% = strScriptName %>?rCSS=default"<% IF rCSS = "" OR rCSS = "default" THEN %> style="font-weight:bold;"<% END IF %>>Default</a></li>
 <li><a href="<% = strScriptName %>?rCSS=heaven"<% IF rCSS = "heaven" THEN %> style="font-weight:bold;"<% END IF %>>Heaven</a></li>
 <li><a href="<% = strScriptName %>?rCSS=hell"<% IF rCSS = "hell" THEN %> style="font-weight:bold;"<% END IF %>>Hell</a></li>
 <li><a href="<% = strScriptName %>?rCSS=evolt"<% IF rCSS = "evolt" THEN %> style="font-weight:bold;"<% END IF %>>evolt.org</a></li>
 <li><a href="<% = strScriptName %>?rCSS=stealth"<% IF rCSS = "stealth" THEN %> style="font-weight:bold;"<% END IF %>>Stealth</a></li>
 <li><a href="<% = strScriptName %>?rCSS=none"<% IF rCSS = "none" THEN %> style="font-weight:bold;"<% END IF %>>None</a></li>
</ul>

Which will look like this:

Got CSS?

Default

Heaven

Hell

evolt.org

Stealth

None

You can, of course, use images in place of plain-text hyperlinks. I don't primarily because my styles vary so much in color that no single set of images would work — I'd have to create a new set of images for each style.

Finally

You can modify this script to support one style switcher that only changes colors, and another that changes the layout of the page, as well. Or a third one that resizes type, and on and on. Ultimately, whatever you make should take into account how the user will interact with the page and allow a quick and easy way to see and make selections.