乐趣区

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

jiezi

条件注释 (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

退出移动版