Conditional comment

From Wikipedia, the free encyclopedia

Conditional comments are conditional statements interpreted by Microsoft Internet Explorer in HTML source code. Conditional comments first appeared in Microsoft's Internet Explorer 5 browser and is supported through at least version 8.^[1]

Conditional comments can be used to provide and hide code to and from Internet Explorer.

There are two types of "conditional comment", downlevel revealed, and downlevel hidden.

Contents 1 Examples 1.1 Downlevel-hidden conditional comment 1.2 Downlevel-revealed conditional comment 1.3 Conditional Comment in JScript 2 See also 3 References

[edit] 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]>

[edit] Downlevel-hidden conditional comment

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

<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->

or

<!--[if lte IE 7]>
<style type="text/css">
/* [[CSS]] here */
</style>
<![endif]-->

The tag in the first example will let IE 8 read the specified CSS file, while IE 7 or older IE versions 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 newer (greater) or older (less) than a specified version.

[edit] Downlevel-revealed conditional comment

Below is an example of a "downlevel revealed" conditional comment using the default Microsoft syntax:

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

This example shows content that should be exposed only to non-IE browsers, as the condition evaluates to "false" on IE (and hence the content is ignored), while the tags themselves are unrecognized (and hence ignored) on non-IE browsers.

Microsoft acknowledges this syntax is not standardized markup for comments,^[2] intending these tags to be overlooked by other browsers and expose the content in the middle. In order to ensure compliance with W3C standards, some web developers use an alternative technique^[3] for downlevel-revealed conditional comments:

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

While W3C-compliant, this specific syntax is useful only for conditional comments intended specifically for non-IE browsers; 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 problem 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 or higher.</p>
<!--<![endif]-->

The extra "<!" is ignored by non-IE browsers; 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. This revised method allows the conditional comment to comply with strict W3C standards while displaying as intended on all current browsers.

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

[edit] Conditional Comment in JScript

Starting with Internet Explorer 4, there exists a similar proprietary mechanism for adding conditional comments within JScript, known as Conditional Compilation.^[4]

Code examples:

<script type="text/javascript">
/*@cc_on
  document.write("You are using IE4 or higher");
@*/
</script>

There are also several predefined variables[1].

<script type="text/javascript">
/*@cc_on

  @if (@_jscript_version > 5.7)
    document.write("You are using IE8+");
    
  @elif (@_jscript_version == 5.7)
    document.write("You are using IE7");

  @elif (@_jscript_version == 5.6)
    document.write("You are using IE6");

  @elif (@_jscript_version == 5.5)
    document.write("You are using IE5.5");

  @else
    document.write("You are using IE5 or older");

  @end

@*/
</script>

[edit] See also

• CSS filter

[edit] References

1. ^ "About Conditional Comments". Microsoft Corporation. http://msdn2.microsoft.com/en-us/library/ms537512.aspx. 
2. ^ "MSDN — About Conditional Comments". Archived from the original on 2007-01-03. http://web.archive.org/web/20070103163310/http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp. Retrieved on 2007-01-03. 
3. ^ Valid downlevel-revealed conditional comments | 456 Berea Street
4. ^ "Conditional Compilation". Microsoft Corporation. http://msdn2.microsoft.com/en-us/library/ahx1z4fs(VS.80).aspx.