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…

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]:

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.

About the Author

Jeff Starr = Web Developer. Book Author. Secretly Important.