CSS Tip #1 - Avoiding Hacks With IE Conditional Comments

I am pretty sure that every web designer found himself stuck with one or more of Internet Explorer’s annoying bugs and usually he ended up using css hacks to isolate the problem(s). Well, I believe hacks should be used with caution, if used at all, since you never know what adverse effects it may have on your web site with future browser updates.

Fortunately IE developers provided us with a neat solution to this problem with conditional comments. Just what are conditional comments? Basically they are common html comments with an extended syntax. They are completely transparent to all non-IE browsers, so they validate and are much more future-proof than hacks will ever be.

You can use conditional comments like this:

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

or like this:

<!--[if IE 6]>
<style type="text/css">
... css definitions ...
</style>
<![endif]-->

In both cases the styles will only be used from Internet Explorer version 6. Of course we can specify any version of IE we want, like this:

<!--[if lt IE 7]>
... will only run on ie less than version 7 ...
<![endif]-->

<!--[if lte IE 7]>
... will run on ie less than or equal to version 7 ...
<![endif]-->

<!--[if gte IE 7]>
... will run on every ie greater or equal to version 7 ...
<![endif]-->

… and on and on, I am sure you figured out how it works. Still, if you want more info on the subject, you can get it from the MSDN pages in the IE Developer Center.

Have fun!