Misplaced Pages

Conditional comment

Article snapshot taken from Wikipedia with creative commons attribution-sharealike license. Give it a read and then ask your questions in the chat. We can research this topic together.
HTML comments interpreted as code by old versions of Internet Explorer

In Internet Explorer (IE) versions 5 through 9, a conditional comment is text formatted as a comment in HTML source code with special syntax that IE interprets as a conditional statement. A conditional comment specifies whether to include or exclude code based on the evaluation of a conditional expression and is generally used to support different versions of IE or a browser other than IE.

Support for conditional comments was introduced in IE version 5 and dropped in version 10. In IE 10, conditional comments are not supported when the page is in standards mode (document mode 10). An adjacent technology in JScript, called conditional compilation, was introduced in IE 4, and is supported in IE 10, in both standards and compatibility modes.

Syntax

By definition, a code comment is text that is ignored by the translator – the browser, IE, in this case. But, the conditional comment feature adds syntax for a conditional statement that is formatted as a comment. Therefore, some text that is formatted as a comment is actually not a comment. It is markup code. Note that other browsers – that do not support the conditional comment feature – ignore them since they are formatted as comments.

An HTML code comment is text that starts with <!-- and ends with -->. An IE conditional comment is delimited the same, but is like: 

<!-->> ... <!-->

The conditional comment has two forms. The one above is called downlevel hidden. The other form, called downlevel revealed, is not formatted as a comment yet is called a conditional comment none-the-less. It is formatted like: 

<!> ... <!>

The code between the if and endif markup can be any HTML content that is included if the condition evaluates true or excluded otherwise.

An expression can contain the name of a feature, literal values and comparison operators. Feature names include:

  • IE – version of IE that is parsing the HTML document
  • WindowsEdition – edition of Windows hosting IE

Literal values are either numeric or Boolean (true/false).

Comparison operators are:

  • lt – less than; evaluates as true if the left argument is less than the right argument
  • lte – less than or equal; evaluates as true if the left argument is less than or equal to the right argument
  • gt – greater than; evaluates as true if the left argument is greater than the right argument.
  • gte – greater than or equal; evaluates as true if the left argument is greater than or equal to the right argument.
  • (expression) – subexpression; used with logical operators to create a more complex expression
  • ! – logical not; placed before a feature, operator or subexpression to invert its value
  • & – logical and; evaluates as true if all subexpressions evaluate to true
  • | – logical or; evaluates as true if any of the subexpressions evaluates to true

Examples

A downlevel-hidden conditional comment that includes code for IE version 8: 

<!-->
<link href="ie8only.css" rel="stylesheet">
<!-->

A downlevel-hidden conditional comment that includes code for IE version 7 and less: 

<!-->
<style type="text/css">
/* CSS here */
</style>
<!-->

A downlevel-revealed conditional comment (which is not an HTML comment despite the name) that includes code if the browser is not IE. 

<!>
<link href="non-ie.css" rel="stylesheet">
<!>

Microsoft acknowledges this syntax is not standardized markup, 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 for downlevel-revealed conditional comments: 

<!-->-->
<link href="non-ie.css" rel="stylesheet">
<!--<!-->

While possibly confusing, this syntax is valid (X)HTML and is useful for conditional sections intended specifically for non-IE browsers; if the condition evaluates to true (for example, if targeting non-IE browsers and on some versions of IE), IE displays the --> present before the HTML content. This problem is resolved by prepending <! to the initial --> as follows: 

<!--><!-->
This code displays on non-IE browsers and on IE 7 or higher.
<!--<!-->

The extra <! is ignored by non-IE browsers, and also by IE regardless of the condition. If false, everything within the conditional comment is ignored. If true, the resulting tag <!--> is unrecognized and therefore ignored.

Conditional compilation

IE 4 introduced a similar mechanism for JScript, called conditional compilation that was dropped in version 11 standards mode.

Example code: 

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

See also

External links

References

  1. "About Conditional Comments". Microsoft Corporation. Archived from the original on 2008-10-13. Retrieved 2007-10-24.
  2. "HTML5 Parsing in IE10". Microsoft Corporation. 2011-07-06. Archived from the original on 2016-04-20.
  3. "MSDN — About Conditional Comments". Archived from the original on 2007-04-23. Retrieved 2007-01-03.
  4. "Valid downlevel-revealed conditional comments | 456 Berea Street". Archived from the original on 2014-08-19. Retrieved 2007-12-29.
  5. "Conditional Compilation". Microsoft Corporation. Archived from the original on 2008-09-06. Retrieved 2007-12-29.
  6. "@cc_on Statement (JavaScript)". Microsoft Corporation. Archived from the original on 2016-04-04. Retrieved 2015-08-17.
Categories: