Web Design and Web Development Help

Downlevel-hidden Conditional Comments

Downlevel-hidden comment contains hyphens (–) in the opening and closing tag which resemble a normal HTML Comment. As the start and end of this comment is identical to the HTML Comment element, downlevel browsers ignore the content inside the comment block, meaning that this content is hidden from browsers that do not support conditional comments.

If the result of the expression is true, the content contained in the comment is parsed and displayed by IE5 and later browsers.

<!--[if gte IE 5]>
   <p>Well done, you are using a browser which supports Conditional Comments.</p>
<![endif]-->

Downlevel-revealed Conditional Comments

The downlevel-revealed conditional comment lets you include content in browsers that do not support conditional comments. Although the conditional comment itself is ignored, the HTML content inside is still displayed by the browser.

<![if lt IE 5]>
   <p>Please upgrade your browser to one that supports Conditional Comments.</p>
<![endif]>

This code can be used to determine whether the user’s browser can support Conditional Comments. If it can display them, then it will read the comment as false and display nothing. If however it cannot, it will still display the text asking the user to upgrade their browser.

Version Vectors

Conditional Comments can also be used to determine the version of the browser. To check the version your user is using, you use the version vector, followed by a decimal point and four digits. An example is IE 5.5, which would be displayed:

<!--[if IE 5.5000]>.

Note – the Internet Explorer that was first shipped with MS Windows 2000 was version vector 5.2000, not 5.0000.

Common uses

IE only style sheets

Due to the fact that Internet Explorer does not display our code how we would like it to, we have often resorted to using non-validating CSS hacks, yet there is a way we can solve this by using validating Conditional Comments.

If there is a bug in Internet Explorer 6 or less, that you cannot get right no matter how hard you try, then you can link to a separate style sheet that contains an alternative for these browsers.

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

<![endif]>

This makes all browsers less than or equal to Internet Explorer 6 use the separate IE.css style sheet which contains fixes to the bugs you found.

Supporting Firefox

Conditional Comments can also be used to show support for your favourite browser.

<![if IE]>
   <p>Want a better browsing experience, download Firefox now!</p>

<![endif]>

<![if !IE]>
   <p>The chances are that you are experiencing a much better browsing experience with Firefox.  If this is not the case however download Firefox now!</p>
<![endif]>

If your visitor is using Internet Explorer, they see a message suggesting that they switch to Firefox. If they are not using Internet Explorer, then the chances are that they are using Firefox, in the very small case of them using a different browser they are given a link to download Firefox as well.

Additional Examples

<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
<![if !IE]><p>You are not using Internet Explorer.</p><![endif]>

<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->

<!--[if true]>You are using an uplevel browser.<![endif]-->
<![if false]>You are using a downlevel browser, please upgrade!<![endif]>

Pages: 1 2