Conditional comment

Poll without page-refresh

Article on other languages:

	del.icio.us
	Digg
	Furl
	Reddit
	Rojo
	Add to OnlyWire

Conditional comments is a mechanism for HTML authors to take advantage of features of some browsers while gracefully degrading the functionality for browsers which do not support the features without the need to use server side scripting such as ASP or PHP. Conditional comments first appeared in Microsoft's Internet Explorer 5 browser and is supported through at least version 7.^[1]

Conditional comments can be used to hide certain styles from a specific browser, or even to supply a tailored style sheets for individual browser versions.

There are two types of conditional comments, downlevel revealed which is a proprietary Microsoft HTML tag and downlevel hidden which are ignored by non Microsoft browsers because they are treated as a standard comment.

1 Examples
2 References

Examples

Here is a simple example that demonstrates how conditional comments work.

<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<![if !IE]>
<p>You are not using Internet Explorer.</p>
<![endif]>

Downlevel-hidden conditional comment

Below are two examples of a "downlevel hidden" conditional comment:

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7only.css">
<![endif]-->

<!--[if lte IE 7]>
<style>
some css tags
</style>
<![endif]-->

The tag in the first example will let IE 7 read the specified CSS file while IE 6 or less will ignore it. Browsers other than IE will also ignore it because it looks like a standard HTML comment. The tag in the second example will let IE versions 5.0 through 7 read the internal CSS style. With different uses of this tag you can also single out IE 6, IE 5, or versions of IE that are greater or lesser than a specified version.

Downlevel-revealed conditional comment

Below is an example of a "downlevel revealed" conditional comment:

<![if !IE]>
<link rel="stylesheet" type="text/css" href="non-ie.css">
<![endif]>

This is recommended by Microsoft for when the content should be exposed to non-IE browsers.

Microsoft acknowledges this method is not standardized markup for comments[1], intending these tags to be overlooked by other browsers and expose the content in the middle. Some web developers use an alternative technique[2] for downlevel-revealed conditional comments in order to only use standardized markup.

<!--[if !IE]>-->
<link rel="stylesheet" type="text/css" href="non-ie.css">
<!--<![endif]-->

Adding the dashes (and >) before and after each of the conditional tags completes them as valid HTML comments and leaves the enclosed code open to rendering on non-IE browsers. However, this method has the drawback that if the condition evaluates to true (for example, if writing code meant to display on non-IE browsers and on some versions of IE), IE will then display the "-->" present before the HTML content. This is easily solved by prepending "<!" to the initial "-->" as follows:

<!--[if gt IE 6]><!-->
<p>This code displays on non-IE browsers and on IE 7.</p>
<!--<![endif]-->

The extra "<!" is ignored by non-IE browsers because it lies within the HTML comment. It is also ignored by IE regardless of the condition because if false, everything within the conditional comment is ignored, and if true, the resulting tag "<!-->" is unrecognized and therefore ignored. The addition of the extra "<!" allows the conditional comment to comply with strict W3C standards and to display as intended - on all browsers - even if the condition evaluates to true.

While this method is functional in current versions of Internet Explorer, there is no guarantee that future versions will continue to operate this way.

Note: Internet Explorer 4 and below do not support conditional comments.