Alternative Style Sheets

  • Revision slug: CSS/Alternative_style_sheets
  • Revision title: Alternative style sheets
  • Revision id: 169386
  • Created:
  • Creator: Sevenspade
  • Is current revision? No
  • Comment rm minversion template: useless AND inaccurate

Revision Content

Firefox 2 offers support for alternative style sheets. Pages that provide alternative style sheets allow the user to select the style in which the page is displayed using the View>Page Style submenu. This provides a way for users to see multiple versions of a page, based on their needs or preferences.

A web page can use the <tt>link</tt> element to add alternative style sheets to a document.

For example:

 <link href="default.css" rel="stylesheet" type="text/css" title="Default Style">
 <link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
 <link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic">

With these three style sheets offered, the styles "Default Style", "Fancy", and "Basic" will be listed in the Page Style submenu. When the user selects a style, the page will immediately be re-rendered using that style sheet.

When style sheets are referenced with a title attribute on the link or style element, the title becomes one of the choices offered to the user. Style sheets linked with the same title are part of the same choice. Style sheets linked without a title attribute are always applied.

Use rel="stylesheet" to link to the default style, and rel="alternate stylesheet" to link to alternative style sheets. This tells Firefox which style sheet title should be selected by default, and makes that default selection apply in browsers that do not support alternate style sheets.

Working example

Click here for a working example you can try out.

Specification

Revision Source

<p>Firefox 2 offers support for <i>alternative style sheets</i>.  Pages that provide alternative style sheets allow the user to select the style in which the page is displayed using the View&gt;Page Style submenu.  This provides a way for users to see multiple versions of a page, based on their needs or preferences.
</p><p>A web page can use the <tt><a href="en/HTML/Element/link">link</a></tt> element to add alternative style sheets to a document.
</p><p>For example:
</p>
<pre class="eval"> &lt;link href="default.css" rel="stylesheet" type="text/css" title="Default Style"&gt;
 &lt;link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy"&gt;
 &lt;link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic"&gt;
</pre>
<p>With these three style sheets offered, the styles "Default Style", "Fancy", and "Basic" will be listed in the Page Style submenu.  When the user selects a style, the page will immediately be re-rendered using that style sheet.
</p><p>When style sheets are referenced with a <code>title</code> attribute on the <code><a href="en/HTML/Element/link">link</a></code> or <code><a href="en/HTML/Element/style">style</a></code> element, the title becomes one of the choices offered to the user.  Style sheets linked with the same title are part of the same choice.  Style sheets linked without a <code>title</code> attribute are always applied.
</p><p>Use <code>rel="stylesheet"</code> to link to the default style, and <code>rel="alternate stylesheet"</code> to link to alternative style sheets.  This tells Firefox which style sheet title should be selected by default, and makes that default selection apply in browsers that do not support alternate style sheets.
</p>
<h3 name="Working_example">Working example</h3>
<p><a class="external" href="http://developer.mozilla.org/samples/cssref/altstyles/index.html">Click here</a> for a working example you can try out.
</p>
<h3 name="Specification">Specification</h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/html401/present/styles.html#h-14.3">HTML 4.01: External style sheets</a>
</li></ul>
Revert to this revision