關於IE條件註釋（譯）

本文翻譯自此篇文章。翻譯純屬業餘。

許多網站爲了確保他們的站點可以在不一樣的瀏覽器上有不一樣的顯示效果而使用特徵檢測，一些傳統的網站使用其餘技術，諸如在服務器或客戶端上使用腳本去檢測瀏覽器類型。在這裏咱們引入比使用腳本檢測瀏覽器更有優點的方法--條件註釋。條件註釋能夠輕易地更早發現早期的IE版本。條件註釋是層疊樣式表（CSS）用於區分IE特定版本的首選方式。

重要提示 自IE10起，標準模式再也不支持條件註釋。而是採用特徵檢測給瀏覽器不支持的功能來提供備用策略。有關標準模式的詳細信息，請參閱定義文檔兼容性。

 

下面是本文要討論的主題：

 

術語

熟悉下列術語有助於你學習文檔兼容性。　

名詞	描述
expression	由運算符、特徵和（或）值組合造成一個條件語句
downlevel browser	任何瀏覽器除了IE5+，其餘低版本瀏覽器不支持條件註釋
uplevel browser	IE5+支持條件註釋
downlevel-hidden	低版本瀏覽器會忽視條件註釋。若是表達式爲true時，IE5+會渲染HTML頁面
downlevel-revealed	低版本瀏覽器通過條件註釋的解析。若是表達式爲true時，IE5+會渲染HTML頁面

使用條件註釋的好處

下列表格中展現了基本語法類型，第一個註釋是最基本的HTML註釋。表格比較並展現每一種條件註釋的不一樣語法的用法。

註釋類型	語法或可能的值
HTML標準註釋	<!-- Comment content  -->
downlevel-hidden	<!--[if expression]> HTML <![endif]-->
downlevel-revealed	<![if expression]> HTML <![endif]>

 

expression是由功能、操做符和值組成的。下表列出了支持的功能，並介紹了每一個功能支持的值。

　　

Item	Example	註釋
IE	[if IE]	對應IE的版本功能來查看該網頁
value	[if IE 7]	一個整數或浮點標號對應於瀏覽器的版本。若是是與版本號匹配的瀏覽器版本，則返回true。
WindowsEdition	[if WindowsEdition]	Windows 7的IE8。  "WindowsEdition"對應Windows的版本功能。
value	[if WindowsEdition 1]	整數對應Windows版本。若是正在使用的的值相匹配，則返回true。
true	[if true]	結果始終爲true.
false	[if false]	結果始終爲false.

 

下表描述了可用於建立條件表達式的運算符。

Item	Example	註釋
!	[if !IE]	NOT運算符.。被放置在要素、運算符或表達式以前，扭轉表達式的布爾含義。
lt	[if lt IE 5.5]	小於運算符。若是第一個參數小於第二個參數，返回true。
lte	[if lte IE 6]	小於或等於運算符。若是第一個參數小於或等於第二個參數，返回true。
gt	[if gt IE 5]	大於運算符。若是第一個參數大於第二個參數，返回true。
gte	[if gte IE 7]	大於或等於運算符。若是第一個參數大於或等於第二個參數，返回true。
( )	[if !(IE 7)]	子表達式運算符。配合使用布爾運算符來建立更復雜的表達式。
&	[if (gt IE 5)&(lt IE 7)]	AND運算符。若是全部的子表達式的值爲真，返回true。
|	[if (IE 6)|(IE 7)]	OR運算符。若是任何一個子表達式的計算結果爲true，返回true。

Downlevel-hidden條件註釋

此示例顯示了一個低版本隱藏的條件註釋，其中包含文本。

1 <!--[if IE 8]>
2 <p>Welcome to Internet Explorer 8.</p>
3 <![endif]-->

Downlevel-hidden條件註釋相似於基本的HTML註釋，包含連字符（「 - 」）在開啓和關閉標籤。條件顯示在標籤的開口部，和[ENDIF]被放置在標籤的封閉部分以前。內容放在註釋標籤內。

由於前四個字符和註釋的最後三個字符是相同的HTML註釋元素，因此低版本瀏覽器會忽略註釋塊內的HTML內容。因爲內容被有效地不支持條件註釋的瀏覽器隱藏，這種類型的條件註釋被稱爲低版本隱藏。

若是條件表達式的結果爲真，則對註釋塊裏面的內容進行分析，並經過Internet Explorer 5及更高版本的渲染。針對Internet Explorer而專門設計的內容，這種作法特別有效。

下一個示例演示瞭如何在客戶端腳本塊放置一個條件註釋;在這種狀況下，消息在IE5+瀏覽器如何顯示的。

1 <!--[if gte IE 7]>
2 <script>
3   alert("Congratulations! You are running Internet Explorer 7 or a later version of Internet Explorer.");
4 </script>
5 <p>Thank you for closing the message box.</p>
6 <![endif]--> 

在上面的例子中，瀏覽器的版本只有主要的數字進行比較，由於它是在條件表達式指定的惟一數字。要比較這兩個主要和次要版本號，要同時指定數字。

 

ownlevel-revealed條件註釋

ownlevel-revealed條件註釋容許在不認可條件註釋的瀏覽器上包含內容。儘管條件註釋被忽略，但它包含的HTML內容卻沒有被忽略。若是條件爲true,IE5+仍然解析和渲染內容。ownlevel-revealed條件註釋和Downlevel-hidden條件註釋是互補的。

下面片斷展現了一個典型的低版本條件註釋：

1 <![if lt IE 8]>
2 <p>Please upgrade to Internet Explorer version 8.</p>
3 <![endif]>

當比較這種類型HTML註釋時，發如今註釋塊在"<!"和 ">"以後（前）沒有連字符("--") ，所以，註釋分隔符被視爲沒法識別的HTML。由於瀏覽器不能識別Downlevel-hidden條件註釋，那麼它就什麼都不作了。

版本號

條件表達式能夠用來肯定查看網頁瀏覽器的版本或Windows上用於運行瀏覽器的版本。在這兩種狀況下，表達式的值稱爲版本號，必須正確地指定，以得到所需的結果。

檢測瀏覽器的版本時，主要的瀏覽器版本被指定爲整數。要檢查是否有輕微的瀏覽器版本，版本號遵循由一個小數點和四位數組成的規則。例如，微軟的Internet Explorer5.5的發佈版本的版本載體是5.5000。

在下面的例子中，僅主要版本號被指定。

1 <!--[if IE 5]>
2 <p>Welcome to any incremental version of Internet Explorer 5!</p>
3 <![endif]-->

下面的測試正確地識別Internet Explorer 5。

1 <!--[if IE 5.0000]>
2 <p>Welcome to Internet Explorer 5.0!</p>
3 <![endif]-->

例子　

 1 <!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
 2 <![if !IE]><p>You are not using Internet Explorer.</p><![endif]>
 3 
 4 <!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->
 5 <!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->
 6 
 7 <!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
 8 <!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
 9 <!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
10 <!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->
11 
12 <!--[if true]>You are using an <em>uplevel</em> browser.<![endif]-->
13 <![if false]>You are using a <em>downlevel</em> browser.<![endif]>
14 
15 <!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![endif]-->