Dynamic User Preference Script

by Tony Aslett
16 January 2005
Last Updated 25 July 2005

The User Preference Script, allows your visitors to choose color, background-color, font-size and font-family or with a little editing just about any style you wish.

How is this different to other style sheet switchers

Most other style switchers, switch between alternative style sheets, this one adds the rules dynamically to an existing stylesheet. There is nothing wrong with providing alternate stylesheets for your site and if you have a few different themes alternate style sheets are the way to go. Where this script differs is that you don't write alternate style sheets, you just provide some form of control for your visitors to apply different style rules. There can be as many different choices as you like.

Say you want to allow users to adjust the font size ( xx-small, x-small, small, medium, large, x-large xx-large) and color (red, blue, black). You could use pixel, em, % values for font-size and any color values but I am trying to keep this simple. So we have 7 font sizes and 3 colors, if you wished the user to be able to have any of the font sizes with any of the three colors you would need 21 alternate style sheets. Imagine how many there would be if you added in font-family or background colors. With this Dynamic User Preference Script, your user can have any one of the combinations just by selecting what they want.

Browser Support

For the script to work your visitors need JavaScript and cookies enabled, and a browser that supports the DOM function insertStyle or the Microsoft equivalent addStyle. The script is set up to degrade gracefully, so browsers that don't have support for the required functions or have cookies disabled, will not see the controls and can be shown a text alternative.

Browsers above IE4 and Netscape 6, including other Mozilla derivitaves should be able to use the user preference script. Unfortunately Opera does not currently support either function so Opera users will not see the controls.

How it works

The rules are written to the end of your style sheet and have the same cascade weight as other similar rules and may override existing rules. You cannot change unpositioned elements into positioned elements, or vice versa, but just about everything else is free game.

Firstly you need to inclued the JavaScript page in the head section of your document.

Then display the controls somewhere. You can choose a seperate page or display them anywhere you like on a page just by calling the function displayPreferenceControls(). You can also add noscript tags for browsers that don't support JavaScript.

Once the script has been added to a page, the user selects a style and it is applied straight away to the page and added to a cookie for later. You can set up the controls on all or just one page, as long as the JavaScript file has been referenced correctly in the document head the cookie styles will be applied.

Here's the JavaScript file User Preference Script. That may be all you want or need to know, or you can read on to learn how to modify the script to meet the needs of your site.

Examples

The "Write Your Own Styles" section may be a little confusing to users new to CSS or without any CSS knowledge. I think the worst that a user can do is to make the page unreadable in their browser, in which case the user would need to clear their browser cookies. If you have any concerns, it would be best to leave that section out of the script by removing or commenting out the appropriate section of the displayPreferenceControls function. I have added comments to the JavaScript file so the section is easy to find.

Customization

You could use links instead of select boxes by sending the value to the addstyle() function using the onclick event Here's a short code example

If you are unfamilier with JavaScript, take note of how the quotes are escaped. You could also style the links as lists, really it's up to you.

Specificity

In the example above I applied the styles to the body of the document because every document should have a body and you should be able to plug the script into a page and get at least some result. For the script to be most effective, you will most likely need be more specific with your selectors. If you have set a font size in your style sheet for paragraphs then trying to change the font-size of the paragraphs by applying the font-size to the body wont work. So you need to look closely at the elements of your website and choose which areas you will allow visitors to style.

The next thing that will most likely be on your mind is how to apply the styles to other elements. Luckily that's quite simple, just change body for the selector of your choice so to apply styles to elements with a class of "change" the links above would be like

and the select controls would change to

Russ has written a great Selectutorial which should help explain the finer points of selectors.

Graceful Degradation

If this script is not supported by your visitors browsers then it wont mess up the site. They will miss some of the added functionality the User Preference Script provides but the content will still be available. The User Preference Script has been set up to notify users when their browser can't display the controls. The Javascript file will output a message if cookies are disabled or the JavaScript functions are not supported. Noscript tags will provide a message if JavaScript is not supported or disabled in newer browser.

If you have any questions about the script, post to the CSS forums and someone should be able to help out. It would also be good to hear from anyone using the script and to learn from your experiences. Enjoy.