New Bookstore! Save 20% on books with discount code: LAUNCH
Web Dev + WordPress + Security

Wrapping Your Head around Downlevel Conditional Comments

If you think you understand the logic behind Microsoft’s downlevel conditional comments, you are sadly mistaken. Sure, they seem simple enough on the surface, but as you really try to wrap your head around how and why they work, the subtle complexities of downlevel conditional comments may leave you dazed and confused…

[ Image: Human Head via Photographic Cubism ] In our previous article on Internet Explorer’s exclusive browser-detection method, downlevel conditional comments (DCC), we present an introductory exposition, defining expressions and providing several generalized code examples. Overall, it is a very useful article but partially fails at explaining the logic and functionality behind conditional comments. In this article, we strive toward a solid understanding of downlevel conditional comments — how they work, why they work, and where they work. Sure, you could just copy and paste code until something clicks, but actually understanding conditional comments will give you the edge — increasing your knowledge and improving your productivity.

Downlevel-Hidden (Positive) Conditional Comments

As a general rule, comments in code are used to hide content. When a DCC hides content, it is functioning as expected and is referred to as “positive” or “hidden.” For supported versions of Internet Explorer (5 and up), a hidden DCC will display its content only when its [if condition] proves true. If the version of IE does not meet the specified condition, the content remains hidden. Of course, all non-IE browsers will treat the hidden DCC as a regular comment and not display its content.

Here is the generalized, validating syntax for downlevel-hidden (positive) conditional comments:

<!--[if condition]>

   <p>..any (X)HTML content for any "if condition"..</p>

<![endif]-->

Downlevel-Revealed (Negative) Conditional Comments

When a comment is not hiding its contents, it is behaving inversely and thus referred to as “negative” or “revealed.” For supported versions of Internet Explorer (5 and up), a revealed DCC will display its content unless its [if condition] proves false. If the version of IE meets the specified condition, the content remains visible. Of course, all non-IE browsers will display the contents of the revealed DCC.

When dealing exclusively with validating (X)HTML, downlevel-revealed (negative) conditional comments come in three different flavors. Your choice will depend on both the markup language (XHTML or HTML) and the targeted version of Internet Explorer.

Exclude all IE for either XHTML or HTML

When the markup language is either XHTML or HTML and the [if condition] of a revealed DCC excludes all versions of Internet Explorer (via [if !IE]), the format is as follows:

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

   <p>..any (X)HTML content when the condition is strictly "!IE"..</p>

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

Target any version(s) of IE for HTML

When the markup language is HTML and the [if condition] of a revealed DCC targets any version(s) of Internet Explorer (e.g., [if IE 5], [if !IE 6], [if lte IE 7]), the format is as follows:

<!--[if condition]><![IGNORE[--><!--[IGNORE[]]-->

   <p>..any *HTML* content when the condition is anything other than "!IE"..</p>

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

Target any version(s) of IE for XHTML

When the markup langauge is XHTML and the [if condition] of a revealed DCC targets any version(s) of Internet Explorer (e.g., [if IE 5], [if !IE 6], [if lte IE 7]), the format requires duplicate comments with duplicate content. Edit the [if condition] of the first comment to target the required version of IE and leave that of the second comment as [if !IE]. Also, the content for either comment should be identical.

<!--[if condition]>

   <p>..any *XHTML* content when the condition is anything other than "!IE"..</p>

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

   <p>..any *XHTML* content when the condition is anything other than "!IE"..</p>

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

Master Key for the [if condition]

Here is a list of valid expressions for the [if condition]. The proper syntax of a conditional statement may be represented as [if IE 5] or [if !IE 6] or [if ! IE 7], depending on desired functionality. For more information, check out our previous article on downlevel conditional comments. Here is a complete list of logical expressions for the [if condition]:

Condition Result
[if IE] Returns true for any supported version of IE (5+)
[if IE version] Returns true for the specified version of IE
[if lt IE version] Returns true for any IE less than version
[if lte IE version] Returns true for any IE less than or equal to version
[if gt IE version] Returns true for any IE greater than version
[if gte IE version] Returns true for any IE greater than or equal to version
[if !IE version] Returns true for any IE that is not the specified version

Specific Examples of Common Usage

Here are some specific examples of commonly used downlevel conditional comments..

Deliver external CSS and JavaScript exclusively to Internet Explorer 7

This example uses a downlevel-hidden, or positive, conditional comment to serve external CSS and JavaScript files exclusively to IE 7:

<!--[if IE 7]>

   <link href="http://domain.tld/css/ie7-style.css" rel="stylesheet" type="text/css" media="screen" />

   <script src="http://domain.tld/js/ie7-javascript.js" type="text/javascript"></script>

<![endif]-->

Include internal CSS and JavaScript for all versions of Internet Explorer

Here is an example showing how to include internal CSS and JavaScript for all versions (5+) of Internet Explorer:

<!--[if IE]>

   <script type="text/javascript">
   <!--//--><![CDATA[//><!--

      JavaScript goes here
      JavaScript goes here

   //--><!]]>
   </script>

   <style type="text/css">
   <!--/*--><![CDATA[/*><!--*/

      CSS goes here
      CSS goes here

   /*]]>*/-->
   </style>

<![endif]-->

Embed Flash via the Nested Objects Method

As discussed via our comprehensive article on popular methods to embed Flash, here is a standards-compliant, fully valid Flash-inclusion method for HTML using only <object> tags and downlevel revealed (negative) conditional comments:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
      codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" 
      width="333" height="333" id="unique_id" align="middle">
   <param name="movie" value="path/flash_movie.swf" />
   <param name="quality" value="high">
   <param name="bgcolor" value="#fff">

   <!--[if !IE]><![IGNORE[--><!--[IGNORE[]]-->
   <object data="path/flash_movie.swf" type="application/x-shockwave-flash" 
         width="333" height="333"  id="unique_id" align="middle">
      <param name="pluginurl" value="http://www.adobe.com/go/getflashplayer">
      <param name="quality" value="high">
      <param name="bgcolor" value="#fff">
   <!--<![endif]-->

      <p>Alternate content goes here..</p>

   <!--[if !IE]><![IGNORE[--><!--[IGNORE[]]-->
   </object>
   <!--<![endif]-->

</object>

Final thoughts..

I have always found the logic behind conditional comments difficult to grasp. I have written on the topic before, but found myself utterly confused while recently using it as a resource. With this article, I took the time to dive in, study and test the intrinsically complex subtleties of downlevel conditional comments. It is my hope that this article will help users (myself included) really “get” the whole DCC thing, and then use it to their advantage.

Jeff Starr
About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
WP Themes In Depth: Build and sell awesome WordPress themes.

3 responses to “Wrapping Your Head around Downlevel Conditional Comments”

  1. August Klotz 2007/08/22 11:47 am

    In the case when !IE is used, Internet Explorer does not parse the content.
    Thus, replacing this (as seen in your Flash embed example):

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

    ..with this (as seen in many other example around the Web):

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

    ..works just fine.

    As for situations when the condition is anything other than !IE, the comment will invariably be revealed in some versions of IE. In such cases, the --> will be visible to users.

    Therefore, for all cases when the DCC is NOT !IE only, it is best to use <!--> instead of -->.

  2. MileHighTechGuy 2010/02/03 7:13 pm

    Cool, that clears things up a bit.

    I’m just starting to use conditional comments and was wondering if there is a way to do negative conditional comments.

    Thanks,
    Jeff

  3. tea length wedding dress 2011/07/16 11:03 pm

    Zippers can go up the aback or appropriate down the side. Jeans accept designs on them or they can be plain. Suits can be tailored to fit the physique to those that array the body.

Comments are closed for this post. Something to add? Let me know.
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 »
USP Pro: Unlimited front-end forms for user-submitted posts and more.
Thoughts
Take a screenshot with Firefox (no extension required). Open Developer Tools Settings and enable the “Take a screenshot” button. Then click the button :)
Take a screenshot with Chrome (no extension required). Open DevTools, type Cmd + Shift + P, then type screenshot.
After 10 years working on my 2010 iMac, my upgrade finally arrived. Shiny new iMac shipped from Ireland :)
Too much caffeine weirds me out. But I love the taste of coffee. So once in a while I enjoy a small cup of decaf. Hits the spot.
Chris Coyier is a truly awesome person. One of the finest people I've ever worked with. Just #gottasayit
Excel won't open CSV file because SYLK format? Open it with text editor and add an apostrophe ' at the beginning of the file, save changes, done.
Displaying too many social media buttons and links all over the place imho makes you look desperate and frankly kinda sad.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.