浏览器兼容性:条件注释

这篇具有很好参考价值的文章主要介绍了浏览器兼容性:条件注释。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

条件注释与 HTML 注释 ( <!-- -->) 具有相同的语法,但它们仅适用于 Internet Explorer 浏览器 (IE)。尽管现在网络上不再使用该技术。

注释里面的内容只在IE 5-9上可用,其他浏览器会忽略。从 IE 10 开始,语法被禁用。

<!--[if IE]>Only IE sees this<![endif]-->

还可以添加一些约束来限制 IE 版本,例如:

<!--[if IE 8]>Only IE 8 sees this<![endif]-->

<!--[if gte IE 8]>Only IE 8 and higher versions see this<![endif]-->

<!--[if lte IE 8]>Only IE 8 and lower versions see this<![endif]-->

表示IE版本的特殊字符如下:

特点 描述
gt 大于
gte 大于或等于
lt 少于
lte 小于或等于

可以为给定的 IE 版本应用样式或修复,例如:

<link href="styles.css" rel="stylesheet" />

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

<!--[if IE 9]>
    <link href="fix-ie9.css" rel="stylesheet" />
<![endif]-->

styles.css文件包含适用于现代浏览器的样式,而fix-ie8.cssfix-ie9.css文件分别提供适用于 IE 8 和 IE 9 的修复程序。 

但如此,就会多一个 HTTP 请求。但是,可以通过对根元素使用条件注释来减少请求的数量html:

<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->

html根据访问者当前使用的 IE 版本,根元素将有一个额外的 CSS 类。例如,IE 9 浏览器将添加ie9CSS 类。这些样式现在合并为一个CSS文件:

<link href="all-styles.css" rel="stylesheet" />

它包含针对不同 IE 版本的修复:

.card {
    background: rgba(0, 0, 0, 0.5);
}

/* Background with opacity is only available on IE 9 and later */
.ie6 .card,
.ie7 .card,
.ie8 .card {
    background: #ccc;
}

HTTP 请求数问题已解决。但是,样式现在包含许多重复代码。我们可以通过向html元素添加更多 CSS 类来解决此问题:

<!--[if lt IE 7]><html class="lt-ie7 lt-ie8 lt-ie9"><![endif]-->
<!--[if IE 7]><html class="lt-ie8 lt-ie9"><![endif]-->
<!--[if IE 8]><html class="lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->

如此,IE 6、7、8 中 card 的附加样式现在可以合并到一个类声明中:

.lt-ie9 .card {
    /* Styles for IEs before 9 */
}

除了 Internet Explorer (IE),其他浏览器会忽略条件注释。IE 10 也禁用了该标签。如何为其他浏览器和旧版本的 IE 添加额外的类?

可以根据用户代理检测浏览器及其版本。以下代码片段检查当前浏览器是否为 IE 11,并在需要时添加相应的 CSS 类:​​​​​​​

function detectIE11() {
    if (navigator.userAgent.match(/Trident.*rv:11\./)) {
        document.documentElement.classList.add('ie11');
    }
}

一旦ie11将类添加到根html元素,就可以为 IE 11 显式添加更多样式:

.ie11 .otherClass {
    /* Styles for IE 11 */
}

该方法不仅适用于 IE 11,还可以用于支持其他浏览器。 文章来源地址https://www.toymoban.com/news/detail-463824.html

到了这里,关于浏览器兼容性:条件注释的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vite项目低版本浏览器兼容性问题

    技术: vite+vue3.2+ts+element-plus 开发环境没有问题,但是打包后的代码放到正式环境,页面空白... 现场的小伙伴发来报错问题  Uncaught SynntaxError:Unexpected token ? 纳尼,这这这...什么原因,一头雾水 用火狐浏览器访问,没有报错,开始狂摆...时间一点点流逝,全网没有找到解决

    2024年02月09日
    浏览(48)
  • socket.io 解决浏览器兼容性(WebSocket)

             在上一篇讲了 npm 上最流行的 WebSocket 库之一的 ws 库,那么本篇就来讲另外一个,就是 socket.io 库,socket.io 其实是一个兼容方案,当浏览器不支持 H5 的情况下就不能够使用上一篇内容讲的 WebSocket ,只能采用其他的方案,socket.io 就解决了关于浏览器的兼容。 Node实

    2023年04月21日
    浏览(58)
  • 前端浏览器的兼容性问题探讨和解决方案

    解决不同浏览器之间的兼容性问题,可以采取以下一些常用的解决方案: 使用 CSS Reset:不同浏览器对于默认样式的定义存在差异,使用 CSS Reset 可以将不同浏览器的默认样式重置为统一的基准样式,从而减少浏览器之间的差异。 使用 CSS Hack 或浏览器前缀:某些 CSS 属性或值

    2024年02月14日
    浏览(51)
  • Qt 嵌入Vue项目 flapMap 浏览器兼容性问题

    最近有个需求,Qt工程需要嵌入vue项目,本来是很简单的事情。在我的PC上启动Vue项目,同事PC上用浏览器通过IP地址可以正常加载vue项目,但用Qt嵌入总是失败。问题定位步骤如下: 1)换了一个简单的vue项目,发现没有问题,Qt工程能正常加载vue项目 2)由于Qt不像浏览器那样

    2024年02月12日
    浏览(40)
  • 前端开发中常见的浏览器兼容性问题及解决方案

    提示:这里主要阐述浏览器兼容性产生的环境: 所谓的浏览器兼容性问题,是指 因为不同浏览器对同一段代码有着不同的解析,所造成页面显示效果不统一的情况。 为此,解决浏览器兼容,也成为了跨浏览器开发的一个核心问题。 当初微软不加入W3C,使得后者不采用IE的方

    2023年04月18日
    浏览(50)
  • html学习笔记12-HTML5、浏览器兼容性问题

    https://www.runoob.com/html/html5-intro.html HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持

    2024年02月11日
    浏览(46)
  • 8 款浏览器兼容性测试工具介绍,需要的赶紧收藏吧

    目录 前言 1、IETester 2、BrowserShots 3、Spoon Browser Sandbox 4、Browserstack 5、LambdaTest 6、Browserling 7、CrossBrowser Testing 8、Browsera 浏览器的兼容性问题,是指不同浏览器使用内核及所支持的HTML等网页语言标准不同,用户客户端的环境不同造成的显示效果不能达到理想效果。对于用户而言

    2024年02月13日
    浏览(44)
  • 体验DIY物联网浏览器(谷歌内核兼容性好支持H264视频播放)

    一、功能及快捷键说明(说明32位兼容64位,更多版本往下看) 功能及快捷键图说明,不可多得的浏览器,支持右键自定义菜单... 说明:以上功能图快捷键是基于最新版的调整制作,如有差异以实际版本为准,其他问题请留言    二、下载安装包 2.1 100.0.230版本 9i物联网浏览

    2024年02月09日
    浏览(57)
  • 如何开展兼容性测试?兼容性测试有什么作用?

    兼容性测试是指测试软件在特定的硬件平台上、不同的应用软件之间、不同的操作系统平台上、不同的网络等环境中是否能够很友好的运行的测试。兼容性测试是软件测试过程中必不可少的一个过程,没有兼容性测试的测试是不完整的测试,下面来分享怎么做兼容测试,希望

    2023年04月19日
    浏览(64)
  • Microsoft兼容性遥测是什么?Microsoft兼容性遥测占用高磁盘

    Microsoft兼容性遥测是什么?有用户在检查电脑时发现有个Microsoft兼容性遥测的进程占用较大的磁盘空间,可以禁用该进程来加快系统运行速度吗?下面就来详细看看。 什么是Microsoft兼容性遥测? 此服务在Windows 7,8,10上是合法的.Microsoft兼容性遥测是Windows进程,它存储有关计

    2024年02月04日
    浏览(78)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包