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.
<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
<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.
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.
Click here for a working example you can try out.