這裏是一個演示條件註釋如何工作的簡單示例。
<!--[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。更多信息參見版本向量(en:Version vector)。 |
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>