Different Stylesheets for
Different Browsers

If I had to develop different pages for different browsers can you imagine what it would do for the cost of a customers site?

Sure if you're doing all the work yourself, you can do this if you want to, but the odd time when I do a small site for $500, that is the budget that I have to work with. It doesn't leave any room for developing multiple copies of the same site. Especially so, if I have to pay one of my designers out of this cost.

Netscape 4.x users represent only a small portion of the total visitors to your site. On my site Netscape 4.x users average about 7%. It seems to me that many Netscape users are not sure about upgrading to a version 6 browser.

The version 6 browsers are capable of fantastic rendering of stylesheet markup. But once you have your pages looking the way you want in Netscape, MSIE and Opera 6.x browsers, a quick check with Netscape 4.x may show you a complete and awful mess, to the point where some of the content is not even being displayed.

I am going to show you a workaround so that this doesn't happen to you.

<link rel="stylesheet" href="navigator.css" type="text/css" 
media="screen">
<style type="text/css" media="all">
@import url("explorer.css");</style>

What we are doing here is using a couple of things that Netscape 4.x won't recognize.

In the top line of this code is the attribute "media" which can contain these values: screen, tty, tv, projection, handheld, print, braille, aura and all

This attribute specifies the intended destination medium for style information. It may be a single media descriptor or a comma-separated list. The default value for this attribute is "screen".

To learn more about this attribute, please point your browsers to:

http://www.w3.org/TR/html401/types.html#type-media-descriptors

But what the specs do not tell you is that Netscape version 4 browsers do not understand anything but the deafult value which is "screen."

So what we are doing here is known as cascading. This is why you often hear Style sheets referenced as CSS. It means Cascading Style sheets. In CSS, more than one style sheet can influence the presentation simultaneously.

http://www.w3.org/TR/REC-CSS1-961217.html#the-cascade

This means:

<link rel="stylesheet" href="navigator.css" type="text/css" 
media="screen">

...will be read by Netscape 4.x browsers. So we have a basic stylesheet called "navigator.css" that contains our style sheet data that Netscape 4.x can render and display.

On the second line we use

<style type="text/css" media="all">
@import url("explorer.css");</style>

@import is not recognized by earlier versions of Netscape 4 and the media attribute value of "all" is not recognized by any Netscape version 4 browser.

So all browsers will read "navigator.css" but only later versions of browsers will read "explorer.css" which can contain your more advanced style sheet markup that Netscape version 4 browsers won't be able to render properly.

| Back to Article Index |

Different Stylesheets for Different Browsers

Different Stylesheets for
Different Browsers