Tips on writing browser compatible css

Writing browser compatible css is a difficult job for people with less experience in css. Specially Internet Explorer make things interesting(or gives you headache, what ever you prefer ;) ). As an application grows it becomes more and more difficult to manage browser compatibility. And as Internet explorer continues to release new versions, it leaves a few time for developers to spare. Some times different browser is needed to tweak differently. It may be the size of the font, padding floating problems etc.

People then started to use Conditional Comments like bellow to give browser compatibility,

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie_hacks.css" />
<![endif]—>

And there is the !important hack

Normally in CSS whichever rule is specified last takes precedence. However if you use !important after a command then this CSS command will take precedence regardless of what appears after it. This is true for all browsers except IE. Here you can find more.

h1 { font-size: 1.6em !important; font-size: 1.4em; }

Here IE still takes 1.4em as the font size.

Tantek box model hack

Tantek introduced a hack for ie and opera regarding the box model problem.

Hybrid Hacking defined css as,

#wrapper {
width: 770px;
wid\th: 750px;
}

It's a legal 'escape' backslash and should be ignored, but when it is inside the property name it is not ignored by IE5 and IE5.5 for Windows. Instead it causes those browsers to ignore the following "t" character in this case, thus making the property name unreadable to them. Which was explained here.

Then there was the The Child and Adjacent Sibling Hacks, as IE does not understands html>body. Which looks like,

#wrapper {
min-height: 500px; /* IEwin does not support min-height */
height: 500px;
}

html>body #wrapper {
height: auto;
}

This is discussed more elaborately here.

Here is a list of rule compatibility of browsers which is really useful.

An easy solution to write css which can easily support different browser

It is a combination of Javascript and CSS. Here is the Javascript that detects the browser and add a dummy class to body tag.

if ( $.browser.msie && $.browser.version == "6.0" ) {
$("body").addClass("ie6");
}

Although it is written in JQuery, there are plain Javascript available.

So now if your clients browser is IE6 then you already have a dummy class added to you body tag. Now you can write IE6 specific hack easily.

h1 { font-size: 1.6em; }
.ie6 h1 { font-size: 1.4em; }

It is more readable and you can provide different hack for different browser and versions with this hack.

References

http://www.positioniseverything.net/articles/ie7-dehacker.html

http://www.evolt.org/ten-css-tricks-you-may-not-know