HTML comment and conditional comment

In the W3C specification, a comment starts with .

This is the most simplified summary of the words of the specification, in a paragraph which is probably one of the darkest in the history of W3C ... (loading the spec page takes a while).

A comment is something that is aimed at developers and is not displayed by browsers and a comment is inserted like this:

<!--
...  a small sketch is worth a thousand words  ...
-->

But the syntax has been developed by Microsoft to enable the inclusion of conditional code, HTML or CSS. This is what Microsoft calls "Conditional comments".

Conditional code

By placing code in a conditional comment, we makes it accessible or not to the rendering engine of the browser depending on a condition.

There are two types of conditional comments, those whose content is ignored by browsers that do not interpret the conditional expression, and those whose content instead will be always taken into account.

Comment whose content should be ignored by other browsers

For Internet Explorer, the inclusion of content depends on the condition being satisfied.

 <!--[if expression]> 
     HTML 
<![endif]-->

What the other browsers see:

 <!--[if expression]>
    HTML
<![endif]-->

All that lies between the opening and closing tags is a comment and should be ignored.

Comment whose content should be taken into account by other browsers

In the case of Internet Explorer, the content will be considered only if the condition is satisfied.

 <![if expression]> 
    HTML 
<![endif]>

What the other browsers see:

 <![if expression]> 
    HTML 
<![endif]>

The start and end tags are not part of the HTML standard, they are ignored and therefore the content itself, is taken into account.

HTML, JavaScript, CSS

Content can be any HTML code. CSS code can be introduced by the tag <style>, or JavaScript code introduced by the tag <script>.

Conditional expressions

These expressions relate the browser version.
In addition, true or false, are unconditional expressions taken into account only by Internet Explorer.

Basic expressions

[if IE] true if the browser is Internet Explorer.

[if IE 8] true if the browser is version 8 of Internet Explorer.

Relational expressions

[if lt IE 8] true if the version number of the browser is less than 8.

[if lte IE 8] if less than or equal to 8.

gt: greater.

gte: greater than or equal.

Logical expressions

[if !IE] true if the browser is NOT Internet Explorer.

With the combination operator () we can build logical expressions.

[if !(IE 8)] if not IE8.

[if (gte IE 7) & (lt IE 9)] for versions of Internet Explorer greater than or equal to 7 and below 9.

[if (IE 6) | (IE 7)] for the version 6 or 7.

Unconditional expressions

[if true] always true.

[if false] always false.

Demonstrations

Code for Internet Explorer 7 and later:

<!--[if gte IE 7]>
<p><b>This appears from Internet Explorer 7.</b></p>
<![endif]-->

Code always taken into account but only by IE:

<!--[if true]> 
<p><b> This is displayed if the browser recognizes the unconditional comments.</b></p>
<![endif]-->

JavaScript for IE only:

<!--[if IE]>
<script language="javascript">
alert("Hi User of Internet Explorer!");
</script>
<![endif]-->

Message for the only users of IE 6 (and older):

<![if lte IE 6]>
<p><b>You should move to a higher version.</b></p>
<![endif]>

Message for users of IE 8 and all other browsers:

<![if gte IE 8]>
<p><b>You're right to use a modern browser.</b></p>
<![endif]>

You're right to use a modern browser.

We can not agree more.