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


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

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

  • 相关阅读:
    Daily Scrum (2015/10/28)
    Dailu Scrum (2015/10/27)
    wenbao与cmd
    wenbao与IIS
    wenbao与模板
    wenbao与git
    wenbao与vscode
    wenbao与矩阵
    wenbao与面试题
    wenbao 与将linux系统(kali)装入U盘
  • 原文地址:https://www.cnblogs.com/LFeather/p/11386397.html
Copyright © 2020-2023  润新知