Stylesheet switcher. Can be used to switch styles to improve accessibility for different users. In this example, the container of the page is given a wide width in the wide.css alternate stylesheet, which can be chosen by the user by clicking on the links below. For the small amount of users who may have JavaScript disabled, an HTML page with an explanatory note is provided.
Stylesheet Switcher Implementation
- Put the following code in the
<head>of the page:<link rel="stylesheet" type="text/css" href="/ippc/css/screen-test.css" media="screen" /> <link rel="stylesheet" type="text/css" href="/ippc/css/screen-test.css" title="default" media="screen" /> <link rel="alternate stylesheet" type="text/css" href="/ippc/css/wide.css" title="wide" media="screen" /> - Put the following links in the
<body>of the page:<a id="defaultstyle" href="serversideSwitch.html?style=default" rel="default" class="styleswitch" title="Switch to default stylesheet.">Normal ||</a> <a id="widestyle" href="serversideSwitch.html?style=wide" rel="wide" class="styleswitch" title="Switch to wide screen stylesheet.">Wide | |</a> - The relevant JavaScript code, which utilizes jQuery, is in global.js