Fun with Downlevel Conditional Comments

By Jeff Starr on Monday, September 4, 2006 — Post a Comment metadata

Post #198 categorized as Function, Structure, last updated on Nov 4, 2007
Tagged with browser, filter, ie, markup, tips, tricks

Ever since Internet Explorer 5 (IE5), Microsoft has included browser support for "downlevel conditional comments," a non-scripted method of browser detection. Downlevel conditional comments (DCC) are a useful tool for targeting directives to specific versions of Internet Explorer. Downlevel conditional comments consist of an opening statement and a closing statement. Taken together, the statements enclose markup, CSS, JavaScript, or any other element typically included within an (X)HTML document. The DCC may be placed anywhere within the document and executes its contents only for the version(s) of IE specified. This technique is useful for delivering IE-specific stylesheets exclusively to specific versions of IE. Unfortunately, the last line of a DCC may invoke validation errors, but fortunately, there is a fix. This article describes the code and techniques used when including downlevel conditional comments in web documents.

General Format

There are two main types of downlevel comments, "downlevel hidden" and "downlevel revealed." Here we present the generalized syntax for each type.

Downlevel-hidden conditional comment:

<!--[(if expression) (IE version)]> 

   code to be hidden
   code to be hidden
   code to be hidden

<![endif]-->

Downlevel-revealed conditional comment:

<!--[(if expression) (IE version)]><!--> 

   code to be revealed
   code to be revealed
   code to be revealed

<!--<![endif]-->

As you might suspect, downlevel-hidden comments hide the comment/code from the specified version(s) of IE, while downlevel-revealed comments function inversely by revealing the comment/code from the specified version(s) of IE.

The possible values for the (if expression) include:

• lt (less than)
• gt (greater than)
• lte (less than or equal to)
• gte (greater than or equal to)
• ! (not operator)
• !lt (not less than)
• !gt (not greater than)
• !lte (not less than or equal to)
• !gte (not greater than or equal to)

Also, the DC qualifier may be omitted entirely in order to directly target a specific version(s) of IE. This example targets all versions of IE6:

<!--[if IE 6]>

And likewise, negation alone may be used as the DC qualifier. This example targets all versions except all IE6 versions:

<!--[if ! IE 6]>

Further, target any browser that is strictly NOT IE:

<!--[if ! IE]>

The possible values for (IE version) include:

• IE 5 (Internet Explorer 5)
• IE 6 (Internet Explorer 6)
• IE 7 (Internet Explorer 7)

Further, each version of IE may be further defined:

• IE 6 (includes any version beginning with 6)
• IE 6.0 (includes precisely version 6.0 only)
• IE 6.0.2800 (includes any version beginning with 6.0.2800)
• IE 6.0.2800.0 (includes precisely version 6.0.2800.0 only)
• etc..

Specific Examples

In this example, we are hiding CSS from all versions (as of version 7) of IE:

<!--[if gt IE 7]>
<style type="text/css">

   h1 { color: red; }

</style>
<![endif]-->

Likewise, here we are hiding CSS from "old" versions of IE (IE 5.5 and below):

<!--[if lte IE 5.5]>
<style type="text/css">

   h1 { color: red; }

</style>
<![endif]-->

This example employs the "not" operator (!) to hide CSS from IE 7 only:

<!--[if ! IE 7]>

   <link rel="stylesheet" type="text/css" href="ie-hacks.css" media="screen" />

<![endif]-->

Finally, downlevel comments may be written without the qualifier to target a specific version of IE. Here, we specifically target IE 6 with some JavaScript:

<!--[if IE 6]>

   <script src="http://domain.com/javascript.js" type="text/javascript"></script>

<![endif]-->

DCC Validation Fix

Pages with a downlevel conditional comment will not validate unless the last line of the DCC is itself commented out as follows:

<!--[if ! IE]><!-->

   code to be validated
   code to be validated
   code to be validated

<!--<![endif]-->

Browser Sniffing

Downlevel conditional comments may also be used as an alternative method for sniffing browser types. Credit for this idea attributed to Stu at CSS Play.

<!--[if IE]>
<h1>IE Browser</h1>
<![endif]-->
<!--[if IE 5]>
<h1>IE 5</h1>
<![endif]-->
<!--[if IE 5.0]>
<h1>IE 5.0</h1>
<![endif]-->
<!--[if IE 5.5]>
<h1>IE 5.5</h1>
<![endif]-->
<!--[if IE 6]>
<h1>IE 6</h1>
<![endif]-->
<!--[if IE 7]>
<h1>IE 7</h1>
<![endif]-->
<!--[if !IE]><!-->
<h1>Non-IE Browser</h1>
<!--<![endif]-->
<!--[if IE 6]><!-->
<h1>IE 6 or Non-IE</h1>
<!--<![endif]-->

References

• About Conditional Comments (Microsoft)

Subscribe to Perishable Press

Toggle Post Options 20710 visits