html的超好玩注释,关于HTML条件注释你可能不知道的一些事儿

最近经常看到类似这样的HTML代码片段，很多前端开发人员应该都熟悉：1

2

3

4

这段代码包含了一些条件注释，它会根据浏览器的不同选择性地给1 .foo { color: red;}

2 .ie6 .foo { color: yellow;}

3 .ie7 .foo { color: blue;}

进一步地，我们就可以避免类似这样的CSS hack：1 /***** 选择器(Selector) Hacks ******/

2 .foo { color: red;}

3 * html .foo { color: yellow; }

4 *:first-child+html .foo { color: blue; }

5

6 /***** 属性(Attribute) Hacks ******/

7 .foo { color: red; *color: blue;  _color: yellow;}

使用“HTML条件注释”来避免CSS hack，这是一种目前比较流行而且比较安全稳定的技术。这种技术的代码有很多版本，再介绍一个比较有意思的，来自于HTML5 Boilerplate：1

2

3

4

文章写到这里，我感觉，写了这么多，全是大家可能都知道的事儿。其实，这篇文章的主题，不是讨论条件注释和CSS hack孰优孰劣，也不是讨论哪种条件注释方案最好，我想讲一些条件注释技术实现代码的细节。

我们聚焦文章的第一段示例代码。看这段代码的第一行:

就算我们没有条件注释的知识，凭字面我们也能大概猜出这行代码的作用：在IE6或更低版本的浏览器中，这行注释会被解析成

在IE条件注释的概念体系中，一共有两种条件注释类型。这种条件注释的类型被称作downlevel-hidden。它的语法是这样的：HTML

语法的细节说明可以查看文章结尾的参考资源。

在将要讨论语法怪异的第四行代码之前，让我们先思考一个问题。凭借现有的HTML条件注释的特性，我们能够实现“IE9、较IE9更高的IE版本以及非IE浏览器中，1

2 ...

3

这样可以吗？不可以。IE9浏览器中，注释条件为真，代码会解析为

凭借现有的HTML条件注释的特性，我们没有办法实现我们的目标。怎么办？

在IE条件注释的概念体系中，还有另外一种条件注释类型叫downlevel-revealed，它的语法(具体语法细节请查看文章结尾的参考资源)是这样的:HTML

很幸运，我们可以利用downlevel-revealed类型的条件注释来实现之前的目标。

对于这行代码浏览器的解析是这样的：在IE9中，浏览器会识别出这是一段条件注释，并且条件为真，所以这段代码会解析为

但是，这段代码，是无法通过(X)HTML验证的。为了能够通过通过(X)HTML验证，我们可以使用一种改进的语法，代码可以修改为：

我们增加了4个 --，这使得代码看起来非常的怪异，这与downlevel-hidden类型有点差别，但它能被IE5-IE9识别为条件注释别并处理。对于改进过的代码，IE5-IE8的解析方式不变。IE10以及非IE浏览器会把  当作一般注释来解析，最终结果不变。但是，IE9出问题了：注释条件仍然为真，解析结果却变成了-->

我们只是增加了一个

至此，我们所得到这行代码，其实就是示例中的第四行代码。

嗯，这行怪异的代码的由来原来是这样的。