Ever used conditional statements/comments in your html? I do, actually, use the technique quite a lot (this site, Flotr). With HTML conditional comments you can detect browser type and version. Now don’t get too excited, because it’s only supported by Internet Explorer 5+ on Windows. Nevertheless, this way of browser detection is really elegant compared to nasty css hacks or javascript user agent detection. This article is shows you how you can use the conditional comments for several handy purposes.

Different types of statements

There are two types of conditional statements. The first type is the so-called downlevel-hidden statement, which hides the statement from browsers that don’t support conditional comments:

<!-- This is a regular HTML comment -->
<!--[if IE]>
<p>This is a downlevel-hidden conditional statement.
Browsers that don't support conditional comments,
think this is a HTML comment.</p>
<![endif]-->

IE browsers will render the paragraph, but others ‘ll omit it, because they think it’s a HTML comment.

The next type of conditional comment is the downlevel-revealed statement. The statement is rendered by browsers that don’t support conditional statements, and of course, IE 5+ browsers only render the statement when they pass the condition.

<![if (gte IE 6)&(lt IE 8)]>
<p>This paragraph is shown by IE6, IE7 and all browsers
that don't support conditional comments.</p>
<![endif]>

The conditions

MSDN has a nice list of possible conditions, so I’m not going to repeat that, I’ll just give some examples with an explanation.

<!--[if IE 5]><p>IE 5</p><![endif]-->
<!--[if gte IE 5]><p>IE 5+</p><![endif]-->
<!--[if gt IE 5]><p>IE 6+</p><![endif]-->
<!--[if !(IE)]><p>Never shown</p><![endif]-->
<!--[if (IE 6)|(IE 7)]><p>IE6 and IE7</p><![endif]-->
<!--[if (gte IE 5)&!(IE 5.5)]><p>IE5+ except IE5.5</p><![endif]-->
<!--[if true]>
<![if IE 6]><p>IE6</p><![endif]>
<![if IE 7]><p>IE7</p><![endif]>
<![endif]-->
<![if !(IE)]><p>All non IE browsers</p><![endif]>

The uses

If you take a look in the source of this page you can see the following conditional tag in between the header tags.

<!--[if lt IE 7]>
<link type="text/css" rel="stylesheet" href="http://solutoire.com/blog/wp-content/themes/v8.gene/styles/ie6.css" />
<![endif]-->

This conditional comment helps me with keeping my original css file free of hacks. This means that all non-IE browsers render this page just fine, but IE6- messes up most of the positioned elements. Non IE and IE7+ browsers think it’s just a HTML comment, so the css file is not loaded, but IE6- browsers load the css file that corrects the css styles.

The same thing can be done for javascript files. My javascript plotting library Flotr needs Excanvas to treat VML as a canvas element. Excanvas is only needed for IE browsers, because most popular non IE browsers support the canvas element.

<!--[if IE]><script language="javascript" type="text/javascript" src="path/to/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="path/to/prototype-x.x.x.x.js"></script>
<script language="javascript" type="text/javascript" src="path/to/flotr.js"></script>

Further reading

I recommend reading the article on MSDN about conditional statements if this post didn’t make any sense to you. Also, Peter-Paul Koch wrote a nice roundup on conditional comments at his website quirksmode.org.