A turbo-charged style-sheet switcher

Providing user customisation options by making css files scriptable.

During a recent discussion with Gez Lemon of Juicy Studio, about the best way to set the text size on text pages - and the merits or otherwise of using web page based scripts to provide customization options - Gez reminded me that many users do not know they can change text size (and many other things) using their browser preferences.

I have to admit, that in the past, I was not an advocate of providing an alternative interface for setting presentation elements on a page - my reasons included:

• It is rarely a good idea to undermine common browser interface elements and preferences.
• Users can change the settings themselves, and have more control in their browser preferences than they are likely to get with a style sheet switcher or other server or client side tools.
• Most such tools use javascript and cookies - so they will not work for all users.

However - having agreed that many user do not know they can change the preferences in their browser - I am more sympathetic towards the use of embedded user interface changers (If I could think of a better phrase I would use it). I am inclined to think that - if implemented properly - they have a role to play.

An important aspect of accessible web design is giving the end user the ability to change presentation elements to suit their own needs. Ensuring that your web design practices don't get in the way of the users ability to change their browser preferences is one way to do this; providing alternative style sheets is another.

Unfortunately, unlike in Mozilla browsers where alternative style sheets can be chosen from the view menu, Internet Explorer provides no such facility. A style sheet switcher can be provided easily enough either by using Javascript or by using a server side scripting language such as PHP.

However, style sheet switchers tend to be rather restricted in what they can do; the number of choices that can be provided to the user is limited to the number of style sheets provided by the developer:

If you wanted to provide the options for visitors to your site to choose a text size anywhere between say, 80% and 150% of the default size (sometimes small, medium and big is not enough choice), and you also wanted to provide a choice of background colours of say 10 colours; to provide each combination of colour and text size from these two variables (assuming increments of 1%) would require 700 style sheets.

Even if you just wanted to provide 10% text size increments you would still have to provide 70 alternative style sheets; clearly from both the users and the developers point of view, this is not a particularly flexible solutions. If the choice of font is also regarded as an important accessibility issue - and you wanted to provide a choice of fonts (e.g. specialist fonts suitable for a person with Dyslexia, or someone with a visual impairment) this would increase the number of required alternative style sheets to an even more unmanageable number.

With this is mind, it occurred to me that perhaps there is a place for using a simple web form and a server side script to let users control some common page elements such as colour, text size and preferred font.

One HTML form, some lines of PHP code, and a way to control the values within a style sheet provides us with the ability to set a large number of colours, contrasts, text sizes and font combinations. And we still have the opportunity of providing alternative style sheets to deal with the broad issues such as page layout, and where to position the main menu on the page.

I have created a text size and colour combination switcher as an example of how a form and associated scripts can be used to alter presentation elements.

The PHP scripts and html used for this example.

1. Text size and colours are chosen from a form.
2. After the submit button is pressed, the form is processed by a PHP script which captures the chosen values and stores them in cookies.
3. The style sheet being used to alter the presentation of the page, uses the cookie values to set the text size and background colours.

The following code snippets were used to provide the example I created for this article. My code just demonstrates the principles; you will be able to develop your own more efficient solutions to control your chosen presentation elements (perhaps using a different scripting language).

The following code is placed at the top of each page - it must be first or the cookies will not be set.

The following code is placed within your style sheet. The file suffix of your style sheet will have to be .php, rather than .css. For this to work in Gecko browsers you will also have to ensure the MIME type is sent as text/css - luckily PHP allows us to set header information (thanks to Gez Lemon for reminding me of this).

How does the style sheet switcher work?

Rather than re-invent the wheel, I used Chris Clark's PHP style sheet switcher, to demonstrate how the layout of the page can be changed using a server side style sheet switcher. I won't cover the details here, as Chris has already done a good job of explaining how it works.

Is it a good idea to make css style sheets scriptable?

It may be that there is some very good reason that I have so far completely missed, that suggests I should not be adding scripts to standard style sheets - but so far I can't think of one. I ran the ideas past accessibility experts David Sloan (Digital Media Access Group), Ian Davidson (Common Knowledge) and Gez Lemon of Juicy Studio, (who also provided good ideas about how the script should work). All suggested improvements (and possible problems) - but none suggested that it was a bad idea.

David Sloan's e-mail contained some interesting points.

Improvements that could be made to this particular example