条件注释的两种形式——下层隐藏与下层显示

条件注释的两种形式——下层隐藏与下层显示

条件注释 (conditional comment) 是于HTML源码中被 Microsoft Internet Explorer 有条件解释的语句。条件注释可被用来向 Internet Explorer 提供及隐藏代码。
条件注释最初于微软的 Internet Explorer 5浏览器中出现,并且直至 Internet Explorer 9 均支持。微软已宣布于 Internet Explorer 10 中以标准模式处理页面 - 如 HTML5 - 时停止支持,但是旧版网页使用这种技术(于兼容性视图)将继续有效。

在处理兼容问题时,条件注释是非常常见的手段

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

上述示例为Bootstrap官方的兼容性写法,if lt IE 9 意为if less than IE 9,也就是说当浏览器版本小于IE9时,执行下列语句,当然小于也就是说不包括IE9,如果是小于等于则是lte(less than or equal to),大于(gt)和大于等于(gte)同理可得,普通条件注释的写法可以说很清晰了,所以这篇记录的重点也不是这里,而是针对IE以外的浏览器如何使用条件注释。

最初我是这样写的:

<!--[if !IE]>
<script type="text/javascript" src="<%=Page.ResolveClientUrl("~/Scripts/jquery-2.1.4.min.js")  %>"></script>
<![endif]-->

<!--[if lt IE 9]>
    <script type="text/javascript" src="<%=Page.ResolveClientUrl("~/Scripts/jquery-1.12.4.min.js")%>"></script>
<![endif]-->

想当然地认为 !IE 可以被其他浏览器识别从而达到加载不同版本jQuery的目的,但实际上条件注释正常只有IE5-IE9支持,这是一个IE独有的用法,所以在兼容性的处理上就存在问题,还是看上面的例子,如果去掉2.1.4版本的条件注释,在大部分情况下都可以正常使用,但是在IE9以下的环境中就会加载两个版本的jQuery,并且还有可能因为不支持高版本jQuery的一些写法而报错,那么有没有更好的解决办法呢?还是有的,答案就在条件注释的不同写法中,这两种写法分别叫做下层隐藏与下层显示。

下层隐藏(downlevel-hidden)

下层隐藏就是我们上面用的那种写法,很好理解,也比较常用,但是非IE浏览器都会把它当做普通注释完全忽略里面的内容。

<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->

下层显示(downlevel-revealed)

而想要写出针对其他浏览器生效的条件注释就需要下层显示的写法。首先看一个不太规范的下层显示写法

<![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]-->

这几种写法咋看之下都没什么区别,但是看粗看语法着色就能发现区别,下层显示状态下条件注释中的语句是有着色的,代表其已经被识别到,而下层隐藏反之,原因在于下层显示的写法其实是把条件注释的语句注释了,我们前面说到IE以外的浏览器会把条件注释内的所有内容都当做普通注释忽略,那么当我们把条件注释也注释掉的时候,IE以外的浏览器就可以识别到中间的语句了,所以一个比较合理的兼容性写法可以这样:

<!--[if !IE]>-->
<script type="text/javascript" src="<%=Page.ResolveClientUrl("~/Scripts/jquery-2.1.4.min.js")  %>"></script>
<!--<![endif]-->

<!--[if lt IE 9]>
    <script type="text/javascript" src="<%=Page.ResolveClientUrl("~/Scripts/jquery-1.12.4.min.js")%>"></script>
<![endif]-->

当使用IE5-IE9时,正常识别条件注释,跳过 !IE 的部分,读取 lt IE 9 里面的内容,当使用其他版本时忽略条件注释,读取2.1.4版本jQuery

posted @ 2019-08-21 00:01 奶酪魔像 阅读(...) 评论(...) 编辑 收藏