Logical conditional comments: <!--[If HTML5]> and <!--[if !HTML5]>

Published 2012-02-05 03:59 by Leif Halvard Silli.

When a conditional comment should …

…be treated as ordinary HTML comment:

<!--[if HTML5]> IE doesn't interpret this <![endif]-->

…be treated as a Microsoft conditional comment:

<!--[if !HTML5]>IE interprets this <![endif]-->

Explanation — general

Microsoft’s conditional comments is an elaborated system that allows many more if-conditions than [if IE] and [if !IE]: The point is that whatever value you use, it evaluates to either true or false. If fact, you can can replace [if ie] with [if true], and it will work the same.

You can even use your own value, such as [if Leif]. But where [if ie] counts as a true boolean, then when you use your own value, the value counts as a negative boolean. Thus, if you add the explamation mark before your value, then you have two negatives, which makes a positive. Thus [if !Leif] is equal to [if IE], in the mind of Internet Explorer.

Explanation — specific
  • [if HTML5] is equal to [if !IE].
  • [if !HTML5] is equal to [if IE].
Advantages of [if HTML5] and [if !HTML5]
  • Logical & Easy to remember
  • It works. So why not?
Example code
<!--[if HTML5]><![endif]-->
<!DOCTYPE html>
<html>
   <head>
      <title>test</title>
      <!--[if !HTML5]>
      <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
      <![endif]-->
   </head>
<body>

Except that I used [if HTML5] and [if !HTML5], this example is just the method explained in the post about the optimal way to insert X-UA-Compatible.

Post scriptum.

I pondered on [if html]. However, it is the parser we are after — the HTML5 parser. The WHATWG version of the HTML5 spec avoids the HTML5 term altogetehr and only speaks about HTML. And clearly, you could say [if HTML], if you so wish. But I feel that [if HTML5] has a clearer reference to the parser, than a general [if HTML] would have had.

|