JavaScript EditorBest javascript editor debugger     Ajax website 
↑


Main Page

Previous Page
Next Page

Offering Alternate Style Sheets

You can link to more than one style sheet and let visitors choose the styles they like best. The specifications allow for a base set of persistent styles that are applied regardless of the visitor's preference, a default or preferred set of styles that are applied if the visitor makes no choice, and one or more alternate style sheets that the visitor can choose, at which point the preferred set (though not the persistent one) is deactivated and ignored.

Figure 8.7. This CSS file (base.css) will be our persistent style sheet, and will be applied no matter what the visitor does.


To offer alternate style sheets:

1.
To designate the style sheet that should be used as a base, regardless of the visitor's preferences, use the simple syntax described on page 129, with no title.

Figure 8.8. This style sheet (preferred.css) is the one that I want loaded by default, when the visitor jumps to my page.


2.
To designate the style sheet that should be offered as a first choice, but that can be deactivated by another choice, add title="label" to the link element, where label identifies the preferred style sheet.

Figure 8.9. The visitor will be able to load this alternate style sheet if they want. Its file name is alternate.css.


3.
To designate a style sheet that should be offered as an alternate choice, use rel="alternate stylesheet" title="label" in the link element, where label identifies the alternate style sheet.

Figure 8.10. In order, I've defined the base or persistent style sheet, the preferred or automatic style sheet, and an alternate style sheet. Each style sheet needs its own link element


Tips

  • Currently, only Firefox (Figure 8.11) and Opera offer an easy way to switch from one style sheet to another. However, there are JavaScript solutions for other browsers. For one such solution, check out http://www.alistapart.com/stories/alternate/.

    Figure 8.11. When the page is loaded, it has a dashed border (the preferred value overrides the base value of solid, but the base color is maintained). If the visitor chooses Dotted, the alternate style sheet will be used instead.

  • You can also create style sheets just for printing your Web page (see page 209) or just for viewing it on handhelds (see page 199). For details, see Using Media-Specific Style Sheets on page 133.



Previous Page
Next Page


JavaScript EditorBest javascript editor debugger     Ajax website 
→