Browser Specific Styles

Unfortunately for us, not all browsers support the fill CSS2 specification and some browsers (particularly the older ones) don't even come close. This is not a huge problem if the browser just ignores something that it doesn't understand as you hopefully have coded your stylesheet so that the basic styles information will lead to a reasonable looking page and the more advanced options just pretty it up. Where it does become a big issue is where older browsers implement stylesheet properties incorrectly. This can lead to a messy web page in those browsers that apply our requested styles the wrong way.

Fortunately, in many cases these older browsers contain bugs in the way that they implement CSS that we can make use of to feed different information to different browsers. Such clever manipulations of the way things works are known to computer programmers as "hacks" and the people who write such work-arounds are called "hackers" (not to be confused with people who try to break other people's computer - these people are known in the industry as "crackers" but the media have the two terms confused).

The Mozilla based browsers such as Netscape 6+, Firefox etc as well as Opera 7+ all follow the CSS2 standards reasonably well (apart from those parts of the standards that are not implemented in any browser) and so you will mostly be looking at workarounds to get things to work correctly on other (older) browsers).

Netscape 4

This browser is easily handled. Just define all of your simple commands that you want Netscape 4 to use first and then access the more complex commands that break your display in NS4 using @import, @media, or by placing a media= attribute in the link tag. NS4 will ignore everything imported wit an @import tag or contained within an @media definition and only understands media="screen" (so media="all" will be ignored).

NS4 supports so little of the CSS2 specification (which came out after the browser did) that trying to use workarounds will just make your stylesheets extremely messy. Simply define some simple stylesheet entries that NS4 does understand and which gets the page to display reasonably and hide the rest from the browser completely.

Internet Explorer 5 and 6

These browsers do not support many of the CSS attributes correctly. You can separate out code to be used only for IE5 and IE6 using the following hacks.

div.c {width: 300px;}
div.c {\width:350px;}
div.c {w\idth:300px;}
This one is known as the Simplified Box Model Hack and corrects the width of an element for IE5 (in this instance changing it from 300 to 350 for just that browser). You can manipulate any other property (as long as it doesn't start with a,b,c,d,e, or f) the same way by placing a backslash in front of the whole proprty name on the second reference and in front of any other letter in the name (other than a,b,c,d,e, or f) in the third.

IE5 on the Macintosh behaves somewhat differently from other IE versions. To tell that browser to ignore certain rules you simply surround it with comments with the first comment containing a backslash immediately before the end of the comment (this is called the Holly Hack).

/* \*/
p {color:red;}
/* */

The above code will display text in red in all browsers except IE5 on the Mac.

The Tan Hack is used to specify that the styles are only to apply in Internet Explorer (any version) and should be ignored by other browsers. It does this using the universal selector outside of the html selector. Other browsers assume html is the top level and so it can't be contained in anything else.

* html p {color:red}

This code displays text in red on IE only.

We can of course combine these hacks together, for example to set width to 100 on IE5 on the Mac, 150 in IE5 on windows, 160 in IE6 and 200 on other browsers (not that we would ever want to actually do this) we can use:

p {width:200;}
p {\width:100px;}
p {w\idth:200px;}
/* \*/
* html p {\width:150px;}
* html p {w\idth:160px;}
/* */

You can also hide style declarations from IE6 (and earlier) by using constructs that IE doesn't understand such as child selectors or attribute selectors.

head>body p {color:red;} // or
html[xmlns] p {color:red;}


The support for stylesheets has gradually improved from one version of Opera to the next and so we are mainly concerned with identifying really old versions of Opera.

The Owen Hack hides styles from both Opera 6 (and earlier) and IE6 (and earlier) by using the :first-child pseudo element that those browsers don't understand. By combining that with a child or attribute selector we can set values specific to Opera 5/6.

p {color:black}
head>body p {color:red;}
head:first-child+body p {color:black}

The above will display black text for all browsers except Opera 5 and 6 where it will display red.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow