Book Sale! Save 20% on WordPress books with discount code: SAVE20
Web Dev + WordPress + Security

Fun with Downlevel Conditional Comments

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 may 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. 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

Jeff Starr
About the Author
Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
GA Pro: Add Google Analytics to WordPress like a pro.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
The Tao of WordPress: Master the art of WordPress.
Thoughts
June, July, August historically are slow months on the Web. Perfect time to get some real work done (think projects).
Redesigning Plugin Planet is one the most challenging things I’ve done online. Almost there, about another two weeks ’til launch.
I could listen to Mouse Rat all day.
Thanks Apple for pushing out your massive 3 GB macOS updates because GarageBand. Oh, and Podcasts.
Weird bug with Affinity Designer. If images are opening upside down, click View ▸ Reset Rotation and problem solved.
Had a good laugh today when I saw this in a support email: “In observance of Arbor Day our team will be out of the office on Friday, April 30th.” Lol Arbor Day.
Just spent a few minutes scrolling thru FB, almost every ad was pushing the va×.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.