Once you’ve determined which browser is being used, how do you serve the appropriate style sheet? A variety of techniques are available, but perhaps the most common is to rely on the
JavaScript function document.write():
document.write(‘<link rel=”stylesheet” type=”text/css”
href=”mainNS4.css”>’);

The same function can be used to dynamically insert the @import tag:
document.write(‘@import url(“styles/mainIE.css”);’);

The document.write() function is put to work in a series of conditional statements or if then
else clauses. The if-then-else code block cycles through each of the browser detection statements and, when the current browser is identified, inserts the desired style sheet. Once the style sheet has been dynamically written into the Web page, the code block is exited. Here’s a complete code example that first includes a browser-detection script:

<script type=”text/javascript”
src=”../includes/browser_detect.js”> </script>
<script language=”JavaScript”>
<!–
if (browser.isNS4) {
document.write(“<link REL=’stylesheet’ HREF=’mainNS4.css’
TYPE=’text/css’>”);
} else if (browser.isIE5xMac) {
document.write(“<link REL=’stylesheet’ HREF=’mainIE5xMac.css’
TYPE=’text/css’>”);
} else if (browser.isIE55) {
document.write(“<link REL=’stylesheet’ HREF=’mainIE55.css’
TYPE=’text/css’>”);
} else if (browser.isIE5) {
document.write(“<link REL=’stylesheet’ HREF=’mainIE5.css’
TYPE=’text/css’>”);
} else if (browser.isIE6up) {
document.write(“<link REL=’stylesheet’ HREF=’mainIE6up.css’
TYPE=’text/css’>”);
} else if (browser.isSafari) {
document.write(“<link REL=’stylesheet’ HREF=’mainSafari.css’
TYPE=’text/css’>”);
} else if (browser.isOpera) {
document.write(“<link REL=’stylesheet’ HREF=’mainOpera.css’
TYPE=’text/css’>”);
}
// –>
</script>

The order in which the various browsers are checked is significant. If you’re trying to distinguish between two or more different browsers that share a major version number, the rule of
thumb is to list the selections from the more specific to the more general. You’ll notice in the preceding code that the checks for Internet Explorer version 5 are in this sequence:

} else if (browser.isIE5xMac) {
…
} else if (browser.isIE55) {
…
} else if (browser.isIE5) {

Because the JavaScript processing stops after an if clause is found to be true, it’s crucial that
the condition is not satisfied too early. If the order were reversed, both Internet Explorer 5 on the Macintosh and Internet Explorer 5.5 browsers would be served the Internet Explorer 5 style sheet.

Previously, you saw how to use JavaScript to automatically serve a specific style sheet based on the current browser. To switch between alternative style sheets is particularly helpful when designing sites with accessibility requirements in mind. You can, for example, create a style sheet with higher contrasts or larger font sizes to make it more readable for particular users. To enable this type of programmatic styling, you’ll need to work with the Document Object Model. The DOM is a W3C-supported standard, implemented by the current crop of browsers.

Tags: Styling