Conditional comment

<h2 id="syntax">Syntax</h2>
<p>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.
</p><p>An HTML code comment is text that starts with . An IE conditional comment is delimited the same, but is like:
</p>

<p>The conditional comment has two forms. The one above is called <i>downlevel hidden</i>. The other form, called <i>downlevel revealed</i>, is not formatted as a comment yet is called a conditional comment none-the-less. It is formatted like:
</p>
<![if <i>expression</i>]> ... <![endif]>

<p>The code between the if and endif markup can be any HTML content that is included if the condition evaluates true or excluded otherwise.
</p><p>An expression can contain the name of a feature, literal values and comparison operators. Feature names include: 
</p>
<ul><li>IE – version of IE that is parsing the HTML document</li>
<li>WindowsEdition – edition of Windows hosting IE</li></ul>
<p>Literal values are either numeric or Boolean (true/false). 
</p><p>Comparison operators are:
</p>
<ul><li>lt – less than; evaluates as true if the left argument is less than the right argument</li>
<li>lte – less than or equal; evaluates as true if the left argument is less than or equal to the right argument</li>
<li>gt – greater than; evaluates as true if the left argument is greater than the right argument.</li>
<li>gte – greater than or equal; evaluates as true if the left argument is greater than or equal to the right argument.</li>
<li>(<i>expression</i>) – subexpression; used with logical operators to create a more complex expression</li>
<li>! – <a href="/facts/Logical_not/q5AQBvBj">logical not</a>; placed before a feature, operator or subexpression to invert its value</li>
<li>& – <a href="/facts/Logical_and/62uyyn1d">logical and</a>; evaluates as true if all subexpressions evaluate to true</li>
<li>| – <a href="/facts/Logical_or/jbI2EGlM">logical or</a>; evaluates as true if any of the subexpressions evaluates to true</li></ul>
<h2 id="examples">Examples</h2>
<p>A downlevel-hidden conditional comment that includes code for IE version 8:
</p>

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

<p>A downlevel-revealed conditional comment (which is not an HTML comment despite the name) that includes code if the browser is not IE. 
</p>
<![if !IE]>
<link href="non-ie.css" rel="stylesheet">
<![endif]>

<p>Microsoft acknowledges this syntax is not standardized markup,<a class="footnote-ref" id="fnref:4" href="#fn:4"><sup>4</sup></a> 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<a class="footnote-ref" id="fnref:5" href="#fn:5"><sup>5</sup></a> for downlevel-revealed conditional comments:
</p>

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

<p>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:
</p>

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

<p>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.
</p>
<h2 id="conditional-compilation">Conditional compilation</h2>
<p>IE 4 introduced a similar mechanism for JScript, called conditional compilation<a class="footnote-ref" id="fnref:6" href="#fn:6"><sup>6</sup></a> that was dropped in <a href="/facts/Internet_Explorer_11/EjgV0YJe">version 11</a> standards mode.<a class="footnote-ref" id="fnref:7" href="#fn:7"><sup>7</sup></a>
</p><p>Example code:
</p>
<script>
/*@cc_on
  document.write("You are using IE4 or higher");
@*/
</script>

<h2 id="see-also">See also</h2>
<ul><li><a href="/facts/CSS_filter/z6VbWVHG">CSS filter</a></li></ul>
<h2 id="external-links">External links</h2>
<ul><li><a href="http://www.moreonfew.com/conditional-comments-in-html/">Conditional Comments in HTML</a></li></ul>

<h2 id="references">References</h2>

<ol>
<li id="fn:1"><p>"About Conditional Comments". Microsoft Corporation. Archived from the original on 2008-10-13. Retrieved 2007-10-24. <a href="https://web.archive.org/web/20081013121554/http://msdn2.microsoft.com/EN-US/library/ms537512.aspx" target="_blank">https://web.archive.org/web/20081013121554/http://msdn2.microsoft.com/EN-US/library/ms537512.aspx</a> <a href="#fnref:1" class="footnote-back-ref">↩</a></p></li>
<li id="fn:2"><p>"HTML5 Parsing in IE10". Microsoft Corporation. 2011-07-06. Archived from the original on 2016-04-20. <a href="https://web.archive.org/web/20160420083101/https://blogs.msdn.microsoft.com/ie/2011/07/06/html5-parsing-in-ie10/" target="_blank">https://web.archive.org/web/20160420083101/https://blogs.msdn.microsoft.com/ie/2011/07/06/html5-parsing-in-ie10/</a> <a href="#fnref:2" class="footnote-back-ref">↩</a></p></li>
<li id="fn:3"><p>https://archives.ecma-international.org/2007/misc/jscriptconditionalcompilation2.pdf <a href="https://archives.ecma-international.org/2007/misc/jscriptconditionalcompilation2.pdf" target="_blank">https://archives.ecma-international.org/2007/misc/jscriptconditionalcompilation2.pdf</a> <a href="#fnref:3" class="footnote-back-ref">↩</a></p></li>
<li id="fn:4"><p>"MSDN — About Conditional Comments". Archived from the original on 2007-04-23. Retrieved 2007-01-03. <a href="https://web.archive.org/web/20070423005446/http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp" target="_blank">https://web.archive.org/web/20070423005446/http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp</a> <a href="#fnref:4" class="footnote-back-ref">↩</a></p></li>
<li id="fn:5"><p>"Valid downlevel-revealed conditional comments | 456 Berea Street". Archived from the original on 2014-08-19. Retrieved 2007-12-29. <a href="https://web.archive.org/web/20140819094004/http://www.456bereastreet.com/archive/200511/valid_downlevelrevealed_conditional_comments/" target="_blank">https://web.archive.org/web/20140819094004/http://www.456bereastreet.com/archive/200511/valid_downlevelrevealed_conditional_comments/</a> <a href="#fnref:5" class="footnote-back-ref">↩</a></p></li>
<li id="fn:6"><p>"Conditional Compilation". Microsoft Corporation. Archived from the original on 2008-09-06. Retrieved 2007-12-29. <a href="https://web.archive.org/web/20080906144358/http://msdn2.microsoft.com/en-us/library/ahx1z4fs(VS.80).aspx" target="_blank">https://web.archive.org/web/20080906144358/http://msdn2.microsoft.com/en-us/library/ahx1z4fs(VS.80).aspx</a> <a href="#fnref:6" class="footnote-back-ref">↩</a></p></li>
<li id="fn:7"><p>"@cc_on Statement (JavaScript)". Microsoft Corporation. Archived from the original on 2016-04-04. Retrieved 2015-08-17. <a href="https://web.archive.org/web/20160404160258/https://msdn.microsoft.com/library/8ka90k2e(v=vs.94).aspx" target="_blank">https://web.archive.org/web/20160404160258/https://msdn.microsoft.com/library/8ka90k2e(v=vs.94).aspx</a> <a href="#fnref:7" class="footnote-back-ref">↩</a></p></li>
</ol>

Conditional comment open-in-new

Conditional comment