Browser Detection with Conditional Comments

March 9th, 2006

A very common operation when designing Web pages is to detect the browser type and browser version. This is called browser detection and is used to make sure that what is presented to the browser is compatible and handeld correctly.
There are many different methods to detect what browser a user have. The majority of these methods use either client-side or server-side scripts.
Conditional comments is a script-free client-side alternative to the more common scripted browser detection methods.

Although there are many good browser detection scripts, conditional comments is a strong alternative that in some cases offer certain advantages, especially when dealing with Internet Explorer.

Syntax of a HTML Comment

For comparison I first demonstrate the well known HTML comment. As you
probably already know, the comment tag is used to insert a comment in the source code:

Description Syntax
A HTML comment <!-- Something... -->

A HTML comment will be ignored by the browser, hence not be visible to users. It is often used to explain the code, which can be helpful later on when you or someone else need to do some code changes.

You can also store program-specific code inside HTML comments. Comments will not be visible for the user, but they will still be available to the program.

It’s a good practice to comment the text inside the script and style elements to prevent older browsers that do not support scripting or styles from showing it as plain text.

Syntax of Conditional Comments

Any browser except for Internet Explorer 5 and later versions are
called "downlevel-browsers".

There are two primary conditional comment types:

Description Syntax
downlevel-hidden <!--[if expression]> Something... <![endif]-->
downlevel-revealed <![if expression]> Something... <![endif]>

A downlevel-hidden conditional comment is a comment that can contain HTML code which is ignored in downlevel browsers. Internet Explorer 5 and later versions download and parse the content if the expression is true.

Because the beginning and end characters of the comment are identical to a a standard HTML comment, all downlevel browsers fail to recognize the conditional comment, including the content inside the comment. In other words, downlevel browsers treat this comment as a regular HTML comment and – therefore – any content inside the comment block is effectively hidden from the downlevel browser.

downlevel-revealed conditional comment is a comment that can contain HTML which is parsed in downlevel browsers. Internet Explorer 5 and later versions download and parse the HTML content if the expression is evaluated as true.

Since downlevel browsers doesn’t recognize the downlevel-revealed conditional comment it downloads it without doing anything with it and then continues downloading and parsing the rest of the Web page. Downlevel browsers ignore this type of conditional comment, but they do not ignore the content inside it.

How to use Conditional Comments

Conditional comments are very practical to use to handle Internet Explorer, especially if you’re using CSS. Since Internet Explorer has a lot of bugs in its rendering of CSS it’s in my opinion best to have a separate style sheet for handling IE.
If you place it second in your XHTML head, the cascading nature of CSS will insure that your IE styles will over-rule your non-IE styles.

For example:
<link href="allbrowsers-including-ie.css" media="screen" type="text/css" />
<!--[if IE]>
<link href="ie-only.css" media="screen" type="text/css" />
<![endif]-->

By placing that in the <head> of your (X)HTML document, you can create a browser-specific style sheet without the need for JavaScript browser sniffing.
The "allbrowsers-including-ie.css>" style sheet file in the example above
will be used by IE, but anything in "ie-only.css>" will take precidence and over-rule the rules defined in it.

There are many different ways to use conditional comments, but here are some of the more common onces:

Style Sheets presented to IE except the upcoming version IE 7
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/css/ie.css">
<![endif]-->

Does the same as above
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="/css/ie.css">
<![endif]-->

Hiding HTML from IE
This is what Microsoft suggests, but it’s not valid HTML:
<![if !IE 5]>
something hidden from IE
<![endif]>

This is not what Microsoft suggests, but it’s valid HTML:
<!--[if !IE]>-->
something hidden from IE
<!--<![endif]-->

Entry Filed under: XHTML

Bookmark with del.icio.us

Digg it?

3 Comments

  • 1  |  March 15th, 2006 at 6:56 am by Bobba

    Good tips. Always used JavaScript so far, but I think I will try conditional comments now….

  • 2  |  September 22nd, 2007 at 12:32 am by glory

    This is a great tutorial thanks!n

  • 3  |  September 10th, 2009 at 7:41 am by sandrar

    Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

Links

Subscribe