Fun with style sheet switching
Posted on December 12, 2005 | 2 Comments | No TrackBacks
One of the great things about building your websites using web standards is that the content is completely separated from the design. Since the design is controlled entirely through CSS it becomes simple to change. Add a style sheet switcher to your site and you can even let your users control the design. Click the colored buttons below (or on the right nav) (EDIT: I've moved this to a dropdown in the right nav) for a demonstration.
Now why exactly would you want to give your users control over how your site looks? For CodeScene, I've done it simply because I think it's a cool trick that illustrates the separation of content and presentation. A far more practical use however, would have been to create styles with varying levels of font sizes and contrast. This would add to your site's accessibly by allowing the user to choose the style sheet that is most comfortable for him/her to read. Since CSS also controls not only the colors but the layout, you could use a style sheet switcher to control that aspect as well to perhaps show/hide a navigation bar. Use your imagination.
For those interested in the code behind it, it's a relatively simple javascript library that turns alternate style sheets on and off, and then sets a cookie to remember which one was selected. It was written by Paul Sowden and can be found in the article Alternative Style: Working With Alternate Style Sheets on the infamous A List Apart.
Another reason why style sheets are badass and standards are important. I'm going to experiment with this feature on some of my stuff.
Another cool use is for portal sites like Yahoo, which allow a user to customize and personalize the site's look and feel.