Style Switching

From CSS Discuss

Jump to: navigation, search

Multiple stylesheets allow a single document to be viewed with different styles. Unfortunately, not all web browsers support them natively.

Note that alternate stylesheets are very different from User Stylesheets .

Contents

Client Side

Native

  • Firefox users can switch stylesheets using the {{View > Page Style}} menu.
  • Opera users can switch stylesheets using the {{View > Style}} menu. In Opera 7.x, you can also click the little down arrow next to the User/Author Mode (fourth) button on the Address Bar. In Opera 8, the User/Author button has moved to the view bar which pops up/down from the address bar.
  • Sea Monkey , Mozilla, Netscape6+ and Epiphany (the default browser for the GNOME desktop on UNIX/Linux) users can switch stylesheets using the {{View > Use Style}} menu.
  • Konqueror (the default browser for the KDE desktop on UNIX/Linux) users can switch stylesheets using the {{View > Use Stylesheet}} menu.
  • Galeon (another popular GNOME browser on UNIX/Linux) users can switch stylesheets using the {{View > Styles}} menu.


IE and Opera 6 users are out of luck, although there is a favelet, or bookmarklet (a Java Script bookmark) from http://favelets.com/ which you can use in IE to get functionality similar to Mozilla's Use Styles.


Demos

If you have Mozilla or Opera 7, you can see some examples of alternate stylesheets at:

Java Script

A List Apart has two good articles on style switching with Java Script . The most popular to date is Paul Sowden's drop in switcher, while Daniel Ludin tells how with a little more work we can create a backwards compatible switcher that even works in NS4.


Another style switcher which isn't backwards compatible but can handle alternate stylesheets through style tags, http headers or meta tags, can be found at liorean.web-graphics.com

Eric Meyer on http://meyerweb.com/ has extended Paul Sowden's work to allow users to set the base font size exactly using pixels. This has the double benefit of allowing IE/Win to resize fixed sizes while providing a greater range with finer gradations than the seven standard smallest, smaller ... largest.

Lloyd Wood uses Java Script and .htaccess redirects to fetch a new style sheet.

Brothercake's http://www.brothercake.com/site/resources/scripts/iotbs/ 'Invasion of the body switchers' is an object oriented style switcher. Allows for an unlimited number of alternative styles fed from just one extra stylesheet. Does not work in Mac IE5.

Server Side

This can be done fairly easily with any language that can be used to write dynamic pages (CGI). Basically create a number of stylesheets, and serve one of them based on a cookie. Create a page where users can set their cookie by visiting a certain link.

You could even store the URL of the stylesheet to use in the cookie. With an appropriate way to set the cookie, users could then use an external style sheet that somebody else authored.


Domesticat has an excellent explanation on how to do this with PHP. It's geared towards people with very little PHP and only some HTML, so if you're slightly more advanced than that you should be able to see short-cuts and ways to improve efficiency - Mark Gallagher .

Tutorials:


Authoring

There's three different types of stylesheets that may be included on a page; Persistent stylesheets that are applied no matter which theme you use, preferred stylesheets that are theme stylesheets applied per default, and alternate stylesheets are theme stylesheets not applied per default.

Persistent stylesheets are simply stylesheets that have no title attribute or an empty title attribute.

As for preferred stylesheet, there are multiple ways of declaring the preferred stylesheet. One way is by the http header, setting '{{Default-Style: "<theme title>"}}'. All the theme stylesheets that have that title value will be preferred, the rest will be alternate. That value can also be set by the corresponding meta tag. If no such http header exists, the first value for the title attribute will be the preferred stylesheet. Finally, when using link tag, if you specify a rel value of "alternate stylesheet" instead of "stylesheet", that theme will be specifically set to be an alternate and will not be applied per default.

Some examples: <link type="text/css" rel="Stylesheet" href="persistent.css" />

<link type="text/css" rel="Stylesheet" href="preferred.css" title="default" />

<link type="text/css" rel="Stylesheet" href="preferred-print.css" title="default" media="print" />

<link type="text/css" rel="Alternate Stylesheet" href="alternate.css" title="other" />

<style type="text/css">body: {color: #000;}</style>

<style type="text/css" title="default">body: {background-color: #eee;}</style>

<style type="text/css" title="other">body: {background-color: #eee;}</style>

IE and Op7 don't entirely follow the standard, as they do not automatically set what theme is the preferred and set the rest of the themes as alternate, but instead apply all stylesheets not explicitly set to be Alternate by the rel attribute of the link tag. This means the only safe way of writing alternate styles is to use link tags to set the styles that should be Alternate to be just that. // Liorean [[! Style Switching ]]

Personal tools