条件注释的两种形式——下层隐藏与下层显示
2019-08-26 05:46:40来源:博客园 阅读 ()
条件注释的两种形式——下层隐藏与下层显示
条件注释的两种形式——下层隐藏与下层显示
条件注释 (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
原文链接:https://www.cnblogs.com/LFeather/p/11386397.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:CSS常见布局
下一篇:有关css的兼容问题
- 如此沙雕的代码注释,原来程序员都是段子手 2020-06-08
- html post请求之a标签的两种用法举例 2020-05-11
- HTML标题重要性与html水平线和注释 2020-03-25
- Html介绍,了解html代码的注释 2020-02-12
- html常用标签 2019-12-29
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash