Conditional Comments

A powerful browser sniffing tool in IE

[joshie76]

When developing I usually have the luxury of coding for IE only but sometimes we have to offer cross-browser solutions. However, I still like to take advantage of some of IEs custom features (eg the CSS zooming and so on) where possible. This usually means reams of script to dissect the user agent string and serve up or document.write the correct code for an IE client, allowing the page to degrade gracefully for users of other browsers.

I've just found out about a powerful tool in IE5+ that allows you to do this in a simple cross-browser manner avoiding any scripting: Conditional Comments.

The following code will only render the blue html if the client is using a version of IE greater than or equal to (gte) 5.

<!--[if gte IE 5]>
<p>You are using IE5 or higher</p>
<![EndIf]-->

This is a downlevel conditional comment and will simply be ignored as a comment by other browsers or versions of IE that return false from the if expression. Say you want to take advantage of IE 5.5s CSS zooming feature...

<!--[if gte IE 5.5]>
<p>You are using IE5.5 or higher</p>
<input type="button" value="Click to Zoom" onClick="yourZoomingFunction()">
<![EndIf]-->

There are also uplevel conditional comments that will render on all other browsers but be ignored (according to your if statement) in the specified versions of IE5+.

<![if !IE 5]>
<p>You are using another type of browser or a version of IE other than IE5</p>
<![endif]>

This statement would be ignored by IE5 but rendered by everything else (including IE6). You could obviously change the if statement to handle various browser versions. Here's the reference [msdn.microsoft.com] on msdn.

Downlevel conditional comments (because they follow normal comment syntax) are valid HTML (I tried it against 4.01 transitional). Because the uplevel conditional comment is a slightly different syntax (to allow their content to render on other browsers) then they will throw an exception in a validator - it's your call and depends how important validating HTML is to you.

I think this technique is going to come in very handy:)

(edited by: joshie76 at 3:01 pm (utc) on April 13, 2002)

[avyworld]

When developing I usually have the luxury of coding for IE only but sometimes we have to offer cross-browser solutions but I still like to take advantage of some of IEs custom features (eg the CSS zooming and so on) where possible.

I though NN6 supported the zoom CSS property, too?

Happy coding! :)

[joshie76]

"I though NN6 supported the zoom CSS property, too?"

Really? I've tried it but never seen it work - do you know the syntax?(just to go way off topic;))

[rcjordan]

There was brief mention of conditional comments [webmasterworld.com] in an earlier thread. I thought they'd spark more interest because they really offer an opportunity to enhance a site for IE without resorting to javascript and browser-sniffing.

[joshie76]

Sorry RC, missed that one.

I recently had to create a little app that was entirely client based (yup, just .htm) and we had a lot of extra stuff in there for IE5.5+ users. At the time I wasn't aware of conditional comments so I used document.write to render all the extra bits - was a total nightmare. I'm looking forward to going back on monday and shaving a good few Kb off the file sources;).

[leogah]

One thing not to trip up on: nested comments are not permitted in HTML. As in C, the comment is closed by the first end comment delimiter (simplifying slightly).

So:

<!--[if gte IE 5]>
<p>You are using IE5 or higher</p>
<-- Some random comment -->
Still using IE?
<![EndIf]-->

contains a comment that starts at the beginning of line 1 and ends at the end of line 3.

BTW: zoom is definitely not a standard CSS property. I'll eat my hat if NN6 supports it.