这里是一个演示条件注释如何工作的简单示例。
<!--[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。
微软承认这种句法不是标准化的标记,意图是这些标记被其它浏览器忽视并暴露其中的内容。为了确保与 W3C 标准的兼容,一些网页开发者使用了下层显示的条件注释的一种替代性的技巧。
<!--[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 已取消条件注释的支持)。
自 Internet Explorer 4 开始,存在一种于 JScript 之中加入条件注释的类似的专有的机理,名称是条件编译。 代码示例:
<script>
/*@cc_on
document.write("You are using IE4 or higher");
@*/
</script>
同样有一些预定义的变量,尽管随着微软改变 XP SP3 上的 IE 6 的 JScript 引擎,这些不再可以依赖,现在它如下所示:
@_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>
Copyright © 2014 End of IE SUPPORT. All Rights Reserved