Conditional Comments for Internet Explorer

If you have been writing code for web sites for some time, you will have noticed that Internet Explorer is notoriously strange in its rendering behavior. If you write valid, clean code, your site will likely look nearly identical in the latest versions of Firefox, Safari, Netscape Navigator, Opera, and Camino, but when you pull it up in IE, suddenly your layout is askew.

The old model was to use JavaScript or another scripting language to determine the user’s browser, and deliver content/styles appropriately. However, there has been another solution in place since IE5, which is some simple proprietary Microsoft tags called Conditional Comments.

Here is a simple example:

1 <!--[if IE]>
2 CONTENT/STYLING THAT IS SPECIFIC TO INTERNET EXPLORER
3 <![endif]-->

And here is how it works.

Because Conditional Comments start off with a “<!–” (line 1) and end with a “–>” (line 3), non-IE browsers simply ignore what is inside the tags, which means that your HTML will still validate without error. Only versions of IE5+ have the ability to parse what is inside the comment tags.

In addition to the simple “Is this IE?” check, you have a variety of options to better narrow your filtering. You can specify:

• a specific version of IE (<!–[if IE7]> or <!–[if IE5.5]>)
• only versions of IE prior to or after a specific version (<!–[if
  lt IE7]> or <!–[if gt IE5]>)
• and more complicated expressions utilizing the standard IF
  expression tools (AND, OR, NOT, etc.)

What about IF…ELSE statements?

If you want to set up an IF…ELSE situation, the official Conditional
Comments documentation offers this solution:

1 <!--[if IE]>
2 CONTENT/STYLING THAT IS SPECIFIC TO INTERNET EXPLORER
3 <![endif]-->
4 <!--[if !IE]><!-->
5 CONTENT/STYING THAT IS SPECIFIC TO NON-INTERNET EXPLORER BROWSERS
6 <!--<![endif]-->

The extra “<!–>” in line 4 and “<!–” in line 6 hides the IE-specific tags from non-IE browsers, but allows the coding inside to be parsed by the browser. If you load the page in IE, the “!IE” conditional will cause it to skip over the entire expression, and so IE will not parse what is inside. Most importantly, because the IE-specific tags are commented out, your site will still pass W3C validation. Although this is a slightly complicated bit of coding, it does provide a solid workaround for IF…ELSE statements.

So what are the drawbacks?

The main drawback is that Conditional Comments can only be used in HTML, not in an external CSS file. However, there are many ways to still use Conditional Comments to your benefit. For example, you could easily set up a supplemental CSS file for Internet Explorer and then use Conditional Comments to call up that CSS file:


<link href="stylesheets/styles.css" media="screen" rel="stylesheet"
type="text/css" />
<!--[if IE]>
<link href="stylesheets/ie.css" media="screen" rel="stylesheet"
type="text/css" />
<![endif]-->

Overall, Conditional Comments represent a simple alternative to other browser-sniffing methods when all you want to do is identify IE, especially if you are just trying to put an IE CSS/HTML workaround in place.

To read the full, official documentation about Conditional Comments,
check out Microsoft’s site.