A CSS Style Switcher Without Javascript

There has been a recent trend as of late for Web sites to provide visitors with alternate page view styles to enliven the browsing experience.

While this is a positive for Web standards and accessibility (as it gives those users with vision impairments an option to view high contrast page styles), it also makes for a pretty cool way to spice up a page with a previous-had or down-right different user interface.

Most solutions to this CSS Style Switcher require that users click a link which triggers a Javascript behavior-level function to switch the current stylesheet and set a cookie to the user’s computer to save their page-style preference for the remainder of the browsing session.

While I don’t feel that this is a bad solution - I actually have employed this in the past - I do feel that there are quite a few different ways one can achieve this same effect.

In the following entries on Taming the Wild Wild Web, we’ll be constructing a Server Side CSS Style Switcher using a small amount of PHP, HTML and CSS only.

Our Style Switcher will be a cursory introduction to a simple method that gives users the ability to switch page view styles via an on-screen link while keeping the toolbar functionality of choosing the Web page’s stylesheet. The style switcher will also save their preference in a PHP Session, thereby requiring no cookies being set on the user’s machine.

What is required for this project:

• One HTML file
• One PHP include (to keep our markup a little cleaner)
• One PHP file to route our page style request
• Two CSS files (to provide our choice of page views)

In the next installation of Taming the Wild Wild Web, we’ll construct our two different page styles so that we can get ready for some dynamic server side switching.