最近經(jīng)??吹筋?lèi)似這樣的 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]-->
這段代碼包含了一些條件注釋?zhuān)鼤?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)編寫(xiě)只對(duì)它們生效的 CSS 代碼,比如:
1 .foo { color: red;}
2 .ie6 .foo { color: yellow;}
3 .ie7 .foo { color: blue;}
進(jìn)一步地,我們就可以避免類(lèi)似這樣的 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 /***** 選擇器(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;}
文章寫(xiě)到這里,我感覺(jué),寫(xiě)了這么多,全是大家可能都知道的事兒。其實(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 注釋?zhuān)鼤?huì)被忽略。事實(shí)上,瀏覽器的確是這樣做的。
在IE條件注釋的概念體系中,一共有兩種條件注釋類(lèi)型。這種條件注釋的類(lèi)型被稱(chēng)作 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 條件注釋的概念體系中,還有另外一種條件注釋類(lèi)型叫 downlevel-revealed,它的語(yǔ)法(具體語(yǔ)法細(xì)節(jié)請(qǐng)查看文章結(jié)尾的參考資源)是這樣的:
<![if expression]> HTML <![endif]>
很幸運(yùn),我們可以利用 downlevel-revealed 類(lèi)型的條件注釋來(lái)實(shí)現(xiàn)之前的目標(biāo)。
<![if gt IE 8]> <html> <![endif]>
對(duì)于這行代碼瀏覽器的解析是這樣的:在 IE9 中,瀏覽器會(huì)識(shí)別出這是一段條件注釋?zhuān)⑶覘l件為真,所以這段代碼會(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類(lèi)型有點(diǎn)差別,但它能被IE5-IE9識(shí)別為條件注釋別并處理。對(duì)于改進(jìn)過(guò)的代碼,IE5-IE8的解析方式不變。IE10以及非IE瀏覽器會(huì)把<!--[if gt IE 8]--> <!--[endif]-->當(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ì)把<!--[if gt IE 8]<!--> <!--[endif]-->當(dāng)作一般注釋來(lái)解析,最終結(jié)果不變。IE9的問(wèn)題被修復(fù)了。
至此,我們所得到這行代碼,其實(shí)就是示例中的第四行代碼。
嗯,這行怪異的代碼的由來(lái)原來(lái)是這樣的。