Quick Reminder About Downlevel-Revealed Conditional Comments..

NOTE: This entire article amounts to nothing more than an in-depth learning experience. After writing the article, I realized (painfully) that either format for the second iteration of the downlevel-revealed comment for XHTML is perfectly fine and displays no ill effects or unwanted characters in any browser. Thus, this article is essentially useless, but I am posting it anyway because I just hate deleting several hours of hard work..

As more and more people discover the flexibility, specificity, and all-around usefulness of Microsoft’s proprietary downlevel conditional comments, it behooves us to reiterate the importance of utilizing proper syntax. Specifically, for downlevel-revealed, or negative, conditional comments, the commented content will remain visible unless the associated if condition proves false. For example, if we were using XHTML and wanted to hide a specific CSS file from Internet Explorer 6, we could employ the following conditional comment to do the job:

<!--[if !IE 6]>

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

<![endif]--> 

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

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

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

Within this negative conditional comment, the target CSS file will be delivered to all browsers except IE 6. Within the XHTML code, there are two slightly different instances of the same conditional comment 1. Specifically, in the second iteration of the comment, notice the presence of “<!-->” immediately following the if statement. As written, this small portion of code works perfectly and as expected in all browsers. Unfortunately, there is some misinformation out there on the Web that presents the following erroneous version of such a downlevel conditional comment:

<!--[if condition]>

[...content...]

<![endif]--> 

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

[...content...]

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

See the difference? Instead of the syntactically correct “<!-->”, this improperly written comment uses “-->” instead. So what’s the big deal? This erroneous code results in unwanted characters appearing in all versions of Internet Explorer for which the conditional comment is revealed (in our example, all IE other than version 6). Because of the incorrect way in which such comments are occasionally written, the following characters are displayed directly before the comment contents in all revealed versions of IE:

-->

To see this unwanted display for yourself, check out the test page (provided below) demonstrating both correct and incorrect versions of the conditional comment. Note: the if condition for the test page has been changed to hide from IE 5 in order to accommodate a greater number of users. Upon examination, the test page will display the contents without error in non-IE browsers, but will display the incorrect comment code in all versions of Internet Explorer other than 5.

UPDATE:

As discussed in the note above, this entire article was a learning experience. It turns out that either format for the second iteration of the downlevel-revealed comment for XHTML is perfectly fine and displays no ill effects or unwanted characters in any browser. Here is the code for the test page (mentioned above):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>Perishable Labs - Testing Page: Downlevel-Revealed Conditional Comments</title>
	</head>
	<body>
		<h1>Proper Syntax for downlevel-revealed conditional comments</h1>
		<h2>View this page in any version of Internet Explorer <em>except</em> version 5.</h2>
		<h3>See <a href="" title="">this article</a> for more information.</h3>
		<hr />
		<div>
			<h4>This is the CORRECT way to write downlevel-revealed conditional comments for XHTML:</h4>
			<!--[if !IE 5]>
				<p>The correct way leaves no unsightly dash markings in IE when the comment is revealed.</p>
			<![endif]-->
			<!--[if !IE]><!-->
				<p>The correct way leaves no unsightly dash markings in IE when the comment is revealed.</p>
			<!--<![endif]-->

			<h4>This is the INCORRECT way to write downlevel-revealed conditional comments for XHTML:</h4>
			<!--[if !IE 5]>
				<p>The incorrect way leaves comment dashes in IE when the comment is revealed.</p>
			<![endif]-->
			<!--[if !IE]>-->
				<p>The incorrect way leaves comment dashes in IE when the comment is revealed.</p>
			<!--<![endif]-->
		</div>
		<hr />

	</body>
</html>

Footnote