关于HTML条件注释你可能不知道的一些事儿

猿友 2021-01-08 16:17:56 浏览数 (2075)
反馈

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

1 <!--[if lt IE 7]> <html class="ie6"> <![endif]-->
2 <!--[if IE 7]> <html class="ie7"> <![endif]-->
3 <!--[if IE 8]> <html class="ie8"> <![endif]-->
4 <!--[if gt IE 8]><!--> <html> <!--<![endif]-->

  这段代码包含了一些条件注释,它会根据浏览器的不同选择性地给<html>标记添加(或不添加)一个包含浏览器版本信息的 class属性。具体来说,对于IE5-IE8,<html>标记会增加一个 class 属性,属性值由IE的版本来决定。对于 IE9、较 IE9 更高的IE版本以及非 IE 浏览器,<html>保持原样。这样,我们就可以针对 IE5-IE8 这些老式浏览器来编写只对它们生效的 CSS 代码,比如:

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 /***** 选择器(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;}

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

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

<!--[if lt IE 7]> <html class="ie6"> <![endif]-->

就算我们没有条件注释的知识,凭字面我们也能大概猜出这行代码的作用:在 IE6 或更低版本的浏览器中,这行注释会被解析成<html class="ie6">。在其他IE浏览器(IE7-9)中,它会被解析成空。在非IE浏览器中,毫无疑问,它会被当做我们所熟知的一般 HTML 注释,它会被忽略。事实上,浏览器的确是这样做的。

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

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

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

  在将要讨论语法怪异的第四行代码之前,让我们先思考一个问题。凭借现有的 HTML 条件注释的特性,我们能够实现“IE9、较IE9更高的 IE 版本以及非 IE 浏览器中,<html>保持原样”这一目标吗?

1 <!--[if gt IE 8 | !IE]> <html> <![endif]-->2 ...3 </html>

这样可以吗?不可以。IE9 浏览器中,注释条件为真,代码会解析为<html>。但是,IE10 以及非IE浏览器中,这行代码会被忽略,这会导致 HTML 文档缺少起始<html>标记。从高亮的HTML上,我们可以明显地看出来。特别强调一下,微软已经宣布,IE10 不再支持条件注释。

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

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

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

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

<![if gt IE 8]> <html> <![endif]>

  对于这行代码浏览器的解析是这样的:在 IE9 中,浏览器会识别出这是一段条件注释,并且条件为真,所以这段代码会解析为<html>。在IE8-IE5中,注释的条件为假,故解析为空。在 IE10 以及非 IE 浏览器中,<![if gt IE 8]> 以及 <![endif]>会被当做无法识别的标签,整条代码最终被解析为<html>。感谢微软,我们的目标实现了。

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

<!--[if gt IE 8]--> <html> <!--[endif]-->

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

<!--[if gt IE 8]<!--> <html> <!--[endif]-->

 我们只是增加了一个 <! 。 对于再次改进过的代码,IE5-IE8的解析方式不变。IE10以及非IE浏览器会把<!--[if gt IE 8]<!-->  <!--[endif]-->当作一般注释来解析,最终结果不变。IE9的问题被修复了。

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

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


0 人点赞