Your Search Results

    Alternative style sheets

    Firefox 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 link 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

     

    Document Tags and Contributors

    Contributors to this page: fscholz
    Last updated by: fscholz,