Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






O'Reilly Book Excerpts: JavaScript & DHTML Cookbook

Cooking with JavaScript & DHTML, Part 4

Related Reading

JavaScript & DHTML Cookbook
Solutions and Example for Web Programmers
By Danny Goodman

by Danny Goodman

Editor's note: Short and sweet: that's what our latest sample recipe from JavaScript & DHTML Cookbook is: a quick and simple solution to importing browser- or operating system-specific style sheets. This week's excerpt is from Chapter 11 on "Managing Style Sheets." And next week's recipe will also come from the same chapter--check back here then to learn how to read effective style sheet property values.

Recipe 11.5: Importing Browser- or Operating System-Specific Style Sheets

NN 4, IE 4

Problem

You want to load separate external style sheet files for users on different kinds of computers.

Solution

Use JavaScript to write <link> tags within the head portion of the page, branching according to operating-system detection. The following example loads different style sheet files for Mac users and all other users:

<head>
...
<script language="JavaScript" type="text/javascript">
var cssFile = (navigator.userAgent.indexOf("Mac") != -1) ? 
    "styles/macCSS.css" : "styles/pcCSS.css";
document.write("<link rel='stylesheet' type='text/css' href='" + cssFile + "'>");
</script>
...
</head>

You can combine the browser- or operating system-specific external style sheets with other fixed <link> elements in the same page, as well as other kinds of style sheet definitions or @import rules (where supported). If your content observes the strict version of XHTML, and you want dynamically generated code to also be in that form, you can use the following document.write( ) call instead:

document.write("<link rel='stylesheet' type='text/css' href='" + cssFile + "' />");

To simplify the validation of your script under strict XHTML, you can move the CSS file loading statements to an external .js file.

Discussion

Employing multiple style sheets for different browsers or operating systems imposes the same maintenance headaches as multiple page implementations for different browsers. Any change you make to the design needs to be adapted for each version and tested thoroughly on the designated platforms. And yet, some applications of CSS styles may create an imperative for separate style sheet rules for Internet Explorer for Windows versions that are not fully CSS-compatible (see Recipe 11.13).

See Also

Recipe 11.13 of JavaScript & DHTML Cookbook about the impact on IE 6 for Windows by CSS-compatibility mode; Recipe 5.5 for detecting the browser's operating system.

Danny Goodman has been writing about technology and computers full-time since 1981 and is the author of Dynamic HTML: The Definitive Reference and "The Complete HyperCard Handbook."


Return to the Web Development DevCenter.