HTML and CSS Reference
In-Depth Information
#wrapper a:visited {
color: #fff;
}
#colorswitch a:link {
padding: 10px;
}
Listing 10-10. The CSS File for the Large Font Version ( large.css )
@import ("main.css");
body {
font-size: 1.8em;
}
Listing 10-11. The CSS File for the High-Contrast Version ( contrast.css )
@import ("main.css");
body {
background-color: #000;
font-size: 2em;
}
#wrapper a:hover {
color: #ff2121;
}
Next, we need a script that sets the styles from the selected CSS file and stores the choice in a cookie that can
be read if the user returns to the page (Listing 10-12). Without cookies, the alternate styles would be applied for the
current page of the current session only, which is not practical. If a visually impaired user selects the “high-contrast
theme,” he or she would probably like to read all the pages of the site with the same setting.
Listing 10-12. The styleswitcher.js [35]
function setActiveTheme(title) {
var i, a, main;
for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if (a.getAttribute("title") == title) a.disabled = false;
}
}
}
 
Search WWH ::




Custom Search