资讯专栏INFORMATION COLUMN

快速判断浏览器是否支持特定css、js功能

jokester / 2754人阅读

摘要:,通过进行浏览器功能检测通过可以判断某一功能是否能够被当前浏览器支持,是一个可以插入到你的网页里面的文件,通过调用内部的函数可以完成对当前浏览器的某一功能的检验。我们已经可以通过来判断某一功能能否被当前浏览器所支持。

作为html5开发人员常常面临兼容性和新功能之间的抉择,为了解决这一问题,我们会采取不同的方案,按照问题解决的递进关系可以分为3步(避免问题和解决问题):1,了解主流浏览器对于制定html5功能的支持情况,如果能够得到期望的浏览器的支持,那么可以使用,否则不实用。在了解浏览器的支持情况后,还需要浏览器的装机情况,这样可以进一步了解目标用户对于新功能是否有足够的支持;2,针对一台具体的用户电脑浏览器查询特定的功能时候能够被支持(所谓诊断),可以使用modernizr技术来解决;3mo d针对诊断结果采取解决方案,可以使用腻子脚本来解决(所谓医治)。

1,了解浏览器的支持情况和浏览器在用户中的使用情况

可以通过专门的统计网站caniuse来了解这些情况,


简单说明一下它的使用。上图(caniuse首页截图)是网站内容,在绿框中输入你所需要的html5新功能名字,即可查询对应的使用情况。

caniuse查询结果
在查询结果中可以看到各个主流浏览器的不同版本对于这个功能支持情况。值得注意的是国内一些浏览器大多是盒子浏览器,采用别人的浏览器内核。如QQ浏览器采用的IE内核(支持情况取决于你电脑上安装的IE版本),360浏览器采用的是chrome+IE浏览器双核,百度浏览器同样是双核。具体版本可以通过到官网上进行查询。这些浏览器会基于内核进行优化,所以不能简单根据内核版本判断支持情况,但内核版本可以作为充要条件。

2,通过modernizr进行浏览器功能检测

通过modernizr可以判断某一功能是否能够被当前浏览器支持,modernizr是一个可以插入到你的网页里面的js文件,通过调用内部的函数可以完成对当前浏览器的某一功能的检验。使用方法如下:

1,下载modernizr的js文件。2,将文件放入到你的网页所在的文件夹内。3,在你的网页的head标签中加入对这个js文件的使用。4,编写脚本执行检测功能,并将结果输出到页面中去。

3,通过腻子脚本来解决兼容性的问题。

我们已经可以通过modernizr来判断某一功能能否被当前浏览器所支持。但是这一结果不能帮助浏览器进行正确的现实为了解决这一问题,我们可以通过腻子脚本的方式来解决。针对不同html功能会有腻子脚本来解决,然而腻子脚本的的品质确不一能保证。这是腻子脚本的集合

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111929.html

相关文章

  • 快速判断览器是否支持特定cssjs功能

    摘要:,通过进行浏览器功能检测通过可以判断某一功能是否能够被当前浏览器支持,是一个可以插入到你的网页里面的文件,通过调用内部的函数可以完成对当前浏览器的某一功能的检验。我们已经可以通过来判断某一功能能否被当前浏览器所支持。 作为html5开发人员常常面临兼容性和新功能之间的抉择,为了解决这一问题,我们会采取不同的方案,按照问题解决的递进关系可以分为3步(避免问题和解决问题):1,了解主流浏览...

    lordharrd 评论0 收藏0
  • 面试官(6): 写过『通用前端组件』吗?

    摘要:很久没上掘金发现草稿箱里存了好几篇没发的文章最近梳理下发出来往期面试官系列如何实现深克隆面试官系列的实现面试官系列前端路由的实现面试官系列基于数据劫持的双向绑定优势所在面试官系列你为什么使用前端框架前言设计前端组件是最能考验开发者基本功的测 很久没上掘金,发现草稿箱里存了好几篇没发的文章,最近梳理下发出来 往期 面试官系列(1): 如何实现深克隆 面试官系列(2): Event Bus...

    waltr 评论0 收藏0
  • 览器兼容问题

    摘要:一什么是浏览器兼容问题所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。条件注释最初于微软的浏览器中出现,并且直至均支持。 一、什么是浏览器兼容问题 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都...

    wenshi11019 评论0 收藏0
  • jQuery笔记总结篇

    摘要:希望在做所有事情之前,操作文档。不受层级限制子选择器在给定的父元素下匹配所有子元素。相邻选择器匹配所有紧接在元素后的元素。判断当前对象中的某个元素是否包含指定类名,包含返回,不包含返回下标过滤器精确选出指定下标元素获取第个元素。 原文链接 http://blog.poetries.top/2016... 首先,来了解一下jQuery学习的整体思路 showImg(https://seg...

    NoraXie 评论0 收藏0

发表评论

0条评论

jokester

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<