A simple non-Java way to serve browser specific CSSs

A SIMPLE NON-JAVA WAY TO SERVE BROWSER SPECIFIC CSSs.

This sounds too good to be true, so I'd like to share this with you to find
out what I've missed. I've only been doing CSSs for a couple of weeks now
and have been bashing my head against the same browser incompatibility
problems everyone else has no doubt already suffered. I think I've stumbled
across a simple way to serve different CSSs to specific browsers - one sheet
to Netscape 4 (NS4), one to IE3, and one to IE4, Opera and any other
(reasonably) competent CSS browser. I have so far tested this only for NS4,
Opera and IE4 on a Windows 95, so I would like to know if it also works for
IE3 on W95, and for any other browser on Macs, W98 or any other system. Here
it is, description follows:

<LINK rel="StyleSheet" href="base_ns4.css" type="text/css"
media="screen"><!-- Viewed by all. Use for NS4 styles. -->
<LINK rel="StyleSheet" href="base_xie3.css" type="text/css" media="all"><!--
All except NS4. Use for IE3 styles. -->
<STYLE type="text/css" media="all">
<!--
@import url(standard.css); /* Viewed only by IE4+, Opera or any proper CSS
compatible browser. Use for all CSS styles. */
-->
</STYLE>

WHY IT WORKS

NS4 sees only the first sheet "base_ns4.css". This is because it only
recognises the media type "screen" in the <LINK> tag, it ignores even screen
type "all". This sheet has NS4 specific CSS code, tailored with kludges if
necessary to get it to work.

IE3 sees the first two sheets, "base_ns4.css" followed by "base_ie3.css".
This is because IE3 can read both <LINK> tags. The second sheet
"base_ie3.css" has IE3 specific code, tailored with IE3 kludges if
necessary. Importantly, any kludges done in the "base_ns4.css" sheet must be
undone if necessary in the "base_ie3.css" sheet if they conflict with IE3;
this is easy to do as the "base_ie3.css" sheet is read by IE3 last.

IE3 and NS4 do not recognise the "@import" so only IE4 & Opera can see the
standard.css sheet. This is so named because it is my stand alone sheet,
eventually I'll be able to get rid of the others and just use this one.
Presumably NS5 and IE5 will also be able to see this sheet, but they will
hopefully be better at CSS than NS4 is now. It may be necessary to undo
kludges from the earlier two sheets if necessary if they conflict with
proper CSS code; this is easy to do as for this sheet I define just about
everything, so re-defining earlier kludges to 'good' settings.

TESTING

So far tested against Netscape 4.08, Internet Explorer 4.0 (Version
4.72.3110.8 from the "about Internet Explorer" menu) and Opera 3.51, all on
a Windows 95 system. I would LOVE to hear if this works for IE3, and also
for any other operating system such as Mac, so please test and reply.

Note that you should NOT concatene the "@import" into one line with the
comments - if you do then Opera cannot see the "@import" statement. For
example do THIS:

<!--
@import url(standard.css);
-->

NOT this:

<!-- @import url(standard.css); -->

OTHER IDEAS

I've also tried (unsuccessfully) to specify both <LINK> tags as "preferred"
style sheets by using the TITLE attribute. NS4 would only see one as before
by using the MEDIA attribute set to "all". All the others would see two
<LINK> tags, but should only read the first one as the HTML 4.0 document
says that "... If two or more LINK elements specify a preferred style sheet,
the first one takes precedence." My plan was that the first one would be for
IE3 and this would have MEDIA type "all" to hide it from NS4, while the
second one would be just for NS4 and would be ignored by IE3, IE4 and Opera
because it was the second "preferred" style sheet. Alack, alas, IE4 and
Opera (and NS4 when I reset the MEDIA type back to "screen") all read BOTH
<LINK> tags, thereby setting the second "preferred" style sheet as precedent
over the first, opposite to what HTML 4 says. I didn't test against IE3 but
I assume that the same would happen.

The advantage of this approach is that IE3 would get to read "base_ie3.css"
without reading "base_ns4.css" at all, so you would not have to take so much
care to undo the kludges invoked by "base_ns4.css" for your IE3 browser.
Similarly IE4 and Opera get to read only "base_ie3.css" followed by
"standard.css", one less sheet to undo kludges for. However this advantage
is slight and I haven't really had any problems so far with the approach
given at the top of the page.

FAME, FORTUNE, COPYRIGHT, ETC.

If this is indeed a better solution than Javascript or sending to Agitprop's
StyleServer at http://style.verso.com/styleserver/ then I shall be very
happy with all the ready cash that shall no doubt flood through my e-mail
letter box :D Please test and write back soon!