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 = Web Developer. Security Specialist. WordPress Buff.
The Tao of WordPress: Master the art of WordPress.
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 »
Banhammer: Protect your WordPress site against threats.
Thoughts
Our neighbor just lets their little rat dog bark incessantly 24/7. Endless barking for the whole neighborhood.
Loving Waterfox, my new favorite browser for general surfing and playing on teh Web.
Avoiding Amazon until they stop forcing 2-factor authentication. Frustrating waste of time. Make it optional imbeciles.
Today my trusty scanner died. Not going to replace it. And when my printer finally dies, I'm not going to replace that either.
Spent about a week or so away from screens and media as much as possible. Helps to regain perspective.
Celebrating 8 years providing premium WordPress plugins at Plugin Planet!
Power is *not* relying on a 3rd-party service to handle your email.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.