Tuesday, August 26, 2008

Alternate Style Sheets

Alternate style sheets are those that can be selected manually by the user instead of the default style sheet. Currently, Firefox and Opera are the only major browsers that support Alternate Style Sheets.
Alternate style sheets are loaded using the <link> tag, with the attribute-value pair rel="alternate stylesheet". The title attribute is used to give the alternate style sheet a name. The user can then manually choose the style sheet by selecting the style sheet by name in the browser.
Here is an example of the code that loads an alternate style sheet:
<link rel="alternate stylesheet" href="styles.css" type="text/css" title="serif font" />
In Firefox, this style sheet can be selected by going to View > Page Style > serif font . Different alternate style sheets can be specified for different media by having more than one link element with the same value for the title attribute but different values for the media attribute.
<link rel="alternate stylesheet" href="style.css" title="serif font" media="screen" />
<link rel="alternate stylesheet" href="compactstyle.css" title="serif font" media="handheld" />
Note that all the style sheets referenced by the link tag are downloaded by the browser when the page is displayed even though all of them may not be used. This can add significant latency to the display of the page.

No comments: