條件注釋
條件注釋(conditional comment)是於HTML源碼中被 Microsoft Internet Explorer 有條件解釋的語句。條件注釋可被用來向 Internet Explorer 提供及隱藏代碼。
條件注釋最初於微軟的 Internet Explorer 5瀏覽器中出現,並且直至 Internet Explorer 9 均支持。[1]微軟已宣布於 Internet Explorer 10 中以標準模式處理頁面 - 如 HTML5 - 時停止支持,但是舊版網頁使用這種技術(於兼容性視圖)將繼續有效。[2]JScript 條件注釋於 Internet Explorer 4 中被引進,而在 Internet Explorer 10 中繼續受支持,無論於標準模式或者兼容性模式之中,但在 Windows 應用商店應用程式中不受支持。[3]
示例
這裡是一個演示條件注釋如何工作的簡單示例。
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<p>You are not using Internet Explorer.</p>
<!--<![endif]-->
句法
有兩種「條件注釋」:下層顯示 (downlevel revealed)和下層隱藏(downlevel hidden)。
每種注釋的基本句法如下表所示。第一條展示的是基本的 HTML 注釋,被包括在內作為比較以及用以說明被每種條件注釋使用的不同句法。
注釋類型 | 句法或可能取值 |
---|---|
標準 HTML 注釋 | <!-- Comment content --> |
downlevel-hidden | <!--[if expression]> HTML <![endif]--> |
downlevel-revealed | <![if expression]> HTML <![endif]> |
於每個條件注釋之中的句法塊內的 HTML 表示任意的 HTML 內容塊,包括腳本。兩種條件注釋均使用條件表達式以指示注釋塊內的內容應該被解析還是被忽略。條件表達式由特性,操作符,和/或決定於其特性的值組成。下表展示了支持的特性並描述了每種特性支持的值。
項目 | 示例 | 說明 |
---|---|---|
IE | [if IE] | 字符串 "IE" 是一種對應於用以瀏覽網頁的 Internet Explorer 的版本的一種特性。 |
value | [if IE 7] | 一個對應於瀏覽器版本的整數或浮點數。返回一個布爾值,版本號和瀏覽器版本相匹配時為 true。更多信息參見版本向量。 |
WindowsEdition | [if WindowsEdition] | 適用於 Windows 7 上的 Internet Explorer 8。字符串 "WindowsEdition" 是一種對應於用以瀏覽該網頁的 Microsoft Windows 版本的特性。 |
value | [if WindowsEdition 1] | 一個對應於用以瀏覽該網頁的 Windows 的版本的整數。返回一個布爾值,數值和使用的版本相匹配時為真 true。關於所支持的值和它們所描述的版本的更多信息,參見GetProductInfo 函數的 pdwReturnedProductType 參數。 |
true | [if true] | 永遠等價於 true. |
false | [if false] | 永遠等價於 false. |
可用於創造條件注釋的算符如下表。
項目 | 示例 | 說明 |
---|---|---|
! | [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。 |
下層隱藏的條件注釋
如下是兩個「下層隱藏」條件注釋的示例。
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
或者
<!--[if lte IE 7]>
<style>
/* CSS here */
</style>
<![endif]-->
第一個示例中的指令將會讓 IE 8 讀取指定的 CSS 文件,而 IE 7 或者其它版本的 IE 將會忽略它。非 IE 的瀏覽器同樣會把它忽略因為它看起來像一條標準的 HTML 注釋。第二條示例里的標記將會讓 IE 5 至 7 讀取其內的 CSS 樣式。通過對這種標記的不同的使用你也可以挑出 IE 6, IE 5 或者比指定版本更新(大)或更舊(小)版本的 IE。
下層顯示的條件注釋
如下是一個「下層顯示」條件「注釋」的示例,它除了誤導向的名字之外,根本不是一個 (X)HTML 注釋,使用默認的微軟語法:
<![if !IE]>
<link href="non-ie.css" rel="stylesheet">
<![endif]>
這個示例展示了應該僅對非 IE 瀏覽器暴露的內容,由於該條件對 IE 為假(並且因此該內容被忽略),而這些標籤自身在非 IE 瀏覽器中是無法識別的(並因此被忽略)。這不是有效的 HTML 或 XHTML。
微軟承認這種句法不是標準化的標記,[4]意圖是這些標記被其它瀏覽器忽視並暴露其中的內容。為了確保與 W3C 標準的兼容,一些網頁開發者使用了下層顯示的條件注釋的一種替代性的技巧。[5]
<!--[if !IE]>-->
<link href="non-ie.css" rel="stylesheet">
<!--<![endif]-->
雖然結構上有些令人困惑,這種具體的句法是有效的 (X)HTML 且對為非 IE 瀏覽器準備的有條件的片段是有用的;但如果其中的條件等價於 true(例如,如果寫意圖在非 IE 瀏覽器和一些版本的 IE 上顯示的代碼),IE 將會顯示於 HTML 內容前出現的「-->」。這個問題通過對原來的「-->」之前加一個「<!」很容易解決,如下所示:
<!--[if gt IE 6]><!-->
This code displays on non-IE browsers and on IE 7 or higher.
<!--<![endif]-->
這個額外的「<!」被非 IE 的瀏覽器忽略;它同樣會被 IE 忽略而無論條件,因為如果為假,條件注釋裡面的一切都會被忽略,而如果為真,導致的標籤 <!-->
是一條空注釋並因此被忽略。
這個方法儘管在目前(截至 IE 9)版本的 Internet Explorer 中仍然有用,無法保證未來的版本將會繼續如此工作(Internet Explorer 10 已取消條件注釋的支持)。
JScript 中的條件注釋
自 Internet Explorer 4 開始,存在一種於 JScript 之中加入條件注釋的類似的專有的機理,名稱是條件編譯。[6] 代碼示例:
<script>
/*@cc_on
document.write("You are using IE4 or higher");
@*/
</script>
同樣有一些預定義的變量,[7]儘管隨著微軟改變 XP SP3 上的 IE 6 的 JScript 引擎,[8]這些不再可以依賴,現在它如下所示:
@_jscript_version == 5.7
其結果是,利用條件編譯偵測 IE 6 的方法如下:
<script>
/*@cc_on
@if (@_jscript_version == 10)
document.write("You are using IE10");
@elif (@_jscript_version == 9)
document.write("You are using IE9");
@elif (@_jscript_version == 5.8)
document.write("You are using IE8");
@elif (@_jscript_version == 5.7 && window.XMLHttpRequest)
document.write("You are using IE7");
@elif (@_jscript_version == 5.6 || (@_jscript_version == 5.7 && !window.XMLHttpRequest))
document.write("You are using IE6");
@elif (@_jscript_version == 5.5)
document.write("You are using IE5.5");
@else
document.write("You are using IE5 or older");
@end
@*/
</script>
參考文獻
- ^ About Conditional Comments. Microsoft Corporation. [2012-03-06]. (原始內容存檔於2008-10-13).
- ^ Microsoft - HTML5 Parsing in IE10. [2012-03-06]. (原始內容存檔於2011-07-08).
- ^ 条件编译 (JavaScript), MSDN. [2013-03-26]. (原始內容存檔於2013-08-31).
- ^ MSDN — About Conditional Comments. [2007-01-03]. (原始內容存檔於2007-01-03).
- ^ Valid downlevel-revealed conditional comments | 456 Berea Street. [2012-03-07]. (原始內容存檔於2014-08-19).
- ^ Conditional Compilation. Microsoft Corporation. [2012-03-08]. (原始內容存檔於2008-09-06).
- ^ Conditional Compilation Variables. [2012-03-08]. (原始內容存檔於2016-08-10).
- ^ Detecting IE7+ in JavaScript. [2012-03-08]. (原始內容存檔於2019-09-05).