Browser-specific Style Sheets (4)

The LINK tag

<LINK REL="STYLESHEET" TYPE="text/css" HREF="myStyles.css">

Like the STYLE tag, Explorer 4 has provided LINK with the non-HTML4 DISABLED attribute, allowing us to flag it as a non-Explorer style sheet when creating browser-specific styles:

<LINK REL="STYLESHEET" TYPE="text/css" HREF="navigator.css" DISABLED>

The url argument of createStyleSheet()

The createStyleSheet() method, discussed on the previous page, can have a first string argument pointing to an external style sheet:

document.createStyleSheet(stylesheetURL);

We can, therefore, use it to import a complete external Explorer-specific style sheet:

document.createStyleSheet("explorer.css");

Putting it Together

Using a combination of LINK and STYLE, we can create a very elegant method for using browser-specific external style sheets:

<LINK REL="STYLESHEET" TYPE="text/css" HREF="navigator.css" DISABLED>
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
    if (document.all) document.createStyleSheet("explorer.css");
//-->
</SCRIPT>

Pros and Cons

Like the previous in-page example, Navigator and Explorer read only the styles meant for them. The style sheets are mutually exclusive, so a third style sheet is necessary for cross-browser styles. We can add this with a regular LINKed style sheet:

<LINK REL="STYLESHEET" TYPE="text/css" HREF="bothbrowsers.css">
<LINK REL="STYLESHEET" TYPE="text/css" HREF="navigator.css" DISABLED>
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
    if (document.all) document.createStyleSheet("explorer.css");
//-->
</SCRIPT>