Plugin Sale! Save 15% on pro plugins with discount code: FALL2020
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 = Designer. Developer. Producer. Writer. Editor. Etc.
WP Themes In Depth: Build and sell awesome WordPress themes.
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
Past week here in WA state has been hellish. So much smoke, like living in a chimney.
Now in September, I’m where I wanted to be in March.
Spent some time updating my article on unsafe characters, once again current with latest IETF specification.
Just realized that “Neo” is an anagram for “One”. As in, “he is the One” (The Matrix).
To get VLC app to load all songs (including subfolders), go to Preferences ▸ Show All ▸ Playlist ▸ Subdirectory behavior ▸ Expand.
Switching from PhotoShop to Affinity Photo is one of the most liberating work-related things I've done in 20 years.
Finally got my collection of Pro WordPress plugins updated. Everything now better than ever and current with WP 5.5.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.