您當(dāng)前位置：首頁(yè) > web前端 > htmlcss > 關(guān)于HTML條件注釋你可能不知道的一些事兒

關(guān)于HTML條件注釋你可能不知道的一些事兒

來(lái)源：程序員人生發(fā)布時(shí)間：2014-06-04 02:00:15 閱讀次數(shù)：2698次

最近經(jīng)?？吹筋愃七@樣的HTML代碼片段，很多前端開(kāi)發(fā)人員應(yīng)該都熟悉：

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]-->

　　這段代碼包含了一些條件注釋，它會(huì)根據(jù)瀏覽器的不同選擇性地給<html>標(biāo)記添加（或不添加）一個(gè)包含瀏覽器版本信息的class屬性。具體來(lái)說(shuō)，對(duì)于IE5-IE8，<html>標(biāo)記會(huì)增加一個(gè)class屬性，屬性值由IE的版本來(lái)決定。對(duì)于IE9、較IE9更高的IE版本以及非IE瀏覽器，<html>保持原樣。這樣，我們就可以針對(duì)IE5-IE8這些老式瀏覽器來(lái)編寫只對(duì)它們生效的CSS代碼，比如：

1 .foo { color: red;}2 .ie6 .foo { color: yellow;}3 .ie7 .foo { color: blue;}

進(jìn)一步地，我們就可以避免類似這樣的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條件注釋”來(lái)避免CSS hack，這是一種目前比較流行而且比較安全穩(wěn)定的技術(shù)。這種技術(shù)的代碼有很多版本，再介紹一個(gè)比較有意思的，來(lái)自于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]-->

　　文章寫到這里，我感覺(jué)，寫了這么多，全是大家可能都知道的事兒。其實(shí)，這篇文章的主題，不是討論條件注釋和CSS hack孰優(yōu)孰劣，也不是討論哪種條件注釋方案最好，我想講一些條件注釋技術(shù)實(shí)現(xiàn)代碼的細(xì)節(jié)。

　　我們聚焦文章的第一段示例代碼?？催@段代碼的第一行:

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

就算我們沒(méi)有條件注釋的知識(shí)，憑字面我們也能大概猜出這行代碼的作用：在IE6或更低版本的瀏覽器中，這行注釋會(huì)被解析成<html class="ie6">。在其他IE瀏覽器（IE7-9）中，它會(huì)被解析成空。在非IE瀏覽器中，毫無(wú)疑問(wèn)，它會(huì)被當(dāng)做我們所熟知的一般HTML注釋，它會(huì)被忽略。事實(shí)上，瀏覽器的確是這樣做的。

　　在IE條件注釋的概念體系中，一共有兩種條件注釋類型。這種條件注釋的類型被稱作downlevel-hidden。它的語(yǔ)法是這樣的：

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

語(yǔ)法的細(xì)節(jié)說(shuō)明可以查看文章結(jié)尾的參考資源。

　　在將要討論語(yǔ)法怪異的第四行代碼之前，讓我們先思考一個(gè)問(wèn)題。憑借現(xiàn)有的HTML條件注釋的特性，我們能夠?qū)崿F(xiàn)“IE9、較IE9更高的IE版本以及非IE瀏覽器中，<html>保持原樣”這一目標(biāo)嗎？

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

這樣可以嗎？不可以。IE9瀏覽器中，注釋條件為真，代碼會(huì)解析為<html>。但是，IE10以及非IE瀏覽器中，這行代碼會(huì)被忽略，這會(huì)導(dǎo)致HTML文檔缺少起始<html>標(biāo)記。從高亮的HTML上，我們可以明顯地看出來(lái)。特別強(qiáng)調(diào)一下，微軟已經(jīng)宣布，IE10不再支持條件注釋。

　　憑借現(xiàn)有的HTML條件注釋的特性，我們沒(méi)有辦法實(shí)現(xiàn)我們的目標(biāo)。怎么辦？

　　在IE條件注釋的概念體系中，還有另外一種條件注釋類型叫downlevel-revealed，它的語(yǔ)法（具體語(yǔ)法細(xì)節(jié)請(qǐng)查看文章結(jié)尾的參考資源）是這樣的:

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

很幸運(yùn)，我們可以利用downlevel-revealed類型的條件注釋來(lái)實(shí)現(xiàn)之前的目標(biāo)。

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

　　對(duì)于這行代碼瀏覽器的解析是這樣的：在IE9中，瀏覽器會(huì)識(shí)別出這是一段條件注釋，并且條件為真，所以這段代碼會(huì)解析為<html>。在IE8-IE5中，注釋的條件為假，故解析為空。在IE10以及非IE瀏覽器中，<![if gt IE 8]> 以及 <![endif]>會(huì)被當(dāng)做無(wú)法識(shí)別的標(biāo)簽，整條代碼最終被解析為<html>。感謝微軟，我們的目標(biāo)實(shí)現(xiàn)了。

　　但是，這段代碼，是無(wú)法通過(guò)（X）HTML驗(yàn)證的。為了能夠通過(guò)通過(guò)（X）HTML驗(yàn)證，我們可以使用一種改進(jìn)的語(yǔ)法，代碼可以修改為：

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

我們?cè)黾恿?個(gè) --，這使得代碼看起來(lái)非常的怪異，這與downlevel-hidden類型有點(diǎn)差別，但它能被IE5-IE9識(shí)別為條件注釋別并處理。對(duì)于改進(jìn)過(guò)的代碼，IE5-IE8的解析方式不變。IE10以及非IE瀏覽器會(huì)把 當(dāng)作一般注釋來(lái)解析，最終結(jié)果不變。但是，IE9出問(wèn)題了：注釋條件仍然為真，解析結(jié)果卻變成了--> <html>。我們?cè)俅胃倪M(jìn)一下語(yǔ)法，代碼可以修改為：

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

我們只是增加了一個(gè) <! 。對(duì)于再次改進(jìn)過(guò)的代碼，IE5-IE8的解析方式不變。IE10以及非IE瀏覽器會(huì)把 當(dāng)作一般注釋來(lái)解析，最終結(jié)果不變。IE9的問(wèn)題被修復(fù)了。

　　至此，我們所得到這行代碼，其實(shí)就是示例中的第四行代碼。

　　嗯，這行怪異的代碼的由來(lái)原來(lái)是這樣的。