關於HTML條件注釋你可能不知道的一些事兒

烈火網 2012-07-28 投遞稿件

最近經常看到類似這樣的html**片段，很多前端開發人員應該都熟悉：

2 3

這段**包含了一些條件注釋，它會根據瀏覽器的不同選擇性地給標記新增（或不新增）乙個包含瀏覽器版本資訊的class屬性。具體來說，對於ie5-ie8，標記會增加乙個class屬性，屬性值由ie的版本來決定。對於ie9、較ie9更高的ie版本以及非ie瀏覽器，保持原樣。這樣，我們就可以針對ie5-ie8這些老式瀏覽器來編寫只對它們生效的css**，比如：

1 .foo

2 .ie6 .foo

3 .ie7 .foo

進一步地，我們就可以避免類似這樣的css hack：

1 /***** 選擇器（selector） hacks ******/

2 .foo

3 * html .foo

4 *:first-child+html .foo

5 6 /***** 屬性（attribute） hacks ******/

7 .foo

使用「html條件注釋」來避免css hack，這是一種目前比較流行而且比較安全穩定的技術。這種技術的**有很多版本，再介紹乙個比較有意思的，來自於html5 boilerplate：　　

2 3

文章寫到這裡，我感覺，寫了這麼多，全是大家可能都知道的事兒。其實，這篇文章的主題，不是討論條件注釋和css hack孰優孰劣，也不是討論哪種條件注釋方案最好，我想講一些條件注釋技術實現**的細節。

我們聚焦文章的第一段示例**。看這段**的第一行:

就算我們沒有條件注釋的知識，憑字面我們也能大概猜出這行**的作用：在ie6或更低版本的瀏覽器中，這行注釋會被解析成。在其他ie瀏覽器（ie7-9）中，它會被解析成空。在非ie瀏覽器中，毫無疑問，它會被當做我們所熟知的一般html注釋，它會被忽略。事實上，瀏覽器的確是這樣做的。

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

在將要討論語法怪異的第四行**之前，讓我們先思考乙個問題。憑藉現有的html條件注釋的特性，我們能夠實現「ie9、較ie9更高的ie版本以及非ie瀏覽器中，保持原樣」這一目標嗎？

2 ...

這樣可以嗎？不可以。ie9瀏覽器中，注釋條件為真，**會解析為。但是，ie10以及非ie瀏覽器中，這行**會被忽略，這會導致html文件缺少起始標記。從高亮的html上，我們可以明顯地看出來。特別強調一下，微軟已經宣布，ie10不再支援條件注釋。

憑藉現有的html條件注釋的特性，我們沒有辦法實現我們的目標。怎麼辦？

html

很幸運，我們可以利用downlevel-revealed型別的條件注釋來實現之前的目標。

對於這行**瀏覽器的解析是這樣的：在ie9中，瀏覽器會識別出這是一段條件注釋，並且條件為真，所以這段**會解析為。在ie8-ie5中，注釋的條件為假，故解析為空。在ie10以及非ie瀏覽器中，以及會被當做無法識別的標籤，整條**最終被解析為。感謝微軟，我們的目標實現了。

但是，這段**，是無法通過（x）html驗證的。為了能夠通過通過（x）html驗證，我們可以使用一種改進的語法，**可以修改為：

我們增加了4個 --，這使得**看起來非常的怪異，這與downlevel-hidden型別有點差別，但它能被ie5-ie9識別為條件注釋別並處理。對於改進過的**，ie5-ie8的解析方式不變。ie10以及非ie瀏覽器會把當作一般注釋來解析，最終結果不變。但是，ie9出問題了：注釋條件仍然為真，解析結果卻變成了--> 。我們再次改進一下語法，**可以修改為：

我們只是增加了乙個至此，我們所得到這行**，其實就是示例中的第四行**。

嗯，這行怪異的**的由來原來是這樣的。

關於HTML條件注釋你可能不知道的一些事兒

關於xargs，你可能不知道的

關於checkpoint你可能不知道的事

你可能不知道的東西

關於HTML條件注釋你可能不知道的一些事兒

關於xargs，你可能不知道的

關於checkpoint你可能不知道的事

你可能不知道的東西

相關推薦