Welcome to the new design! Please report any bugs or issues, thanks :)
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.
BBQ Pro: The fastest firewall to protect your 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 »
BBQ Pro: The fastest firewall to protect your WordPress.
Thoughts
What's up with Plesk UI lately? Especially on Chrome it looks just awful, all kinds of broken. Come on Plesk devs get it together.
Things get stressful, I try to pray. Not always easy, but always helps to relax and regain focus.
Nice new speed checker at fastorslow.com.
Easy way to exclude certain tests from WP Site Health: Site Health Tool Manager
Excellent (and free) tool for getting tons of site SSL infos: whynopadlock.com
Everyone just stay home and hide forever. Brilliant idea.
Playing with Microsoft Edge browser on macOS. It's like 1998 all over again.