关于HTML前提注释你也许不知道的一些事儿
|
最近常常看到相同这样的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 <!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 2 <!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]--> 3 <!--[if IE 8]> <html class="lt-ie9"> <![endif]--> 4 <!--[if gt IE 8]><!--> <html> <!--<![endif]--> 文章写到这里，我感受，写了这么多，满是各人也许都知道的事儿。着实，这篇文章的主题，不是接头前提注释和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的题目被修复了。 至此，我们所获得这行代码，着实就是示例中的第四行代码。 嗯，这行独特的代码的由来原本是这样的。 参考资源（编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
