Browser-specific Style Sheets (2)

Just HTML

As we know all too well, from our adventures in scripting, a variable defined twice, assumes the most recent value. The same goes for style rules. We could, for some reason, create the following style sheet:

<STYLE TYPE="text/css">
<!--
    P.example {color:green}
    P.example {color:maroon}
-->
</STYLE>

Or this combination:

<STYLE TYPE="text/css">
<!--
    P.example {color:green}
-->
</STYLE>

<STYLE TYPE="text/css">
<!--
    P.example {color:maroon}
-->
</STYLE>

In both cases, all text within P tags, with a CLASS= attribute of example, will be rendered in maroon, since the P.example {color:maroon} rule overrides the P.example {color:green} rule. That's clear enough, and works the same in both browsers.

The DISABLED Attribute

Internet Explorer 4 supports the non-standard DISABLED attribute for the STYLE tag. If a style sheet is disabled all its style rules are ignored.

We can, therefore, direct Explorer to a specific style sheet, by disabling all others:

<STYLE TYPE="text/css">
<!--
    P.example {color:green}
-->
</STYLE>

<STYLE TYPE="text/css" DISABLED>
<!--
    P.example {color:maroon}
-->
</STYLE>

Browser-specific Styles

We can now create browser-specific style sheets with just HTML:

1. Place the Explorer-specific style sheet first on your page. Both Navigator and Explorer will parse it.
2. Next, place the Navigator-specific style sheet, with the DISABLED attribute. Since Navigator does not recognize the attribute, it will overwrite the rules set in the first style sheet, and use these. Explorer will ignore the new rules.

<STYLE TYPE="text/css"> 
<!--                          /* both browsers */
    P.example {color:green}   /* will read this */
-->                           /* style sheet */
</STYLE>

<STYLE TYPE="text/css" DISABLED>
<!--                          /* Navigator will */
    P.example {color:maroon}  /* read this style sheet */
-->                           /* Explorer will ignore it */
</STYLE>

Pros and Cons

The big plus with this method is that only HTML is used. Another one is the ability to insert all cross-browser styles in the first style sheet.

On the minus side, we have Navigator reading two style sheets, and setting styles twice.

We can, therefore, introduce a short script to allow Navigator to read only the styles necessary.