当前位置: 首页 > Web前端 > CSS

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

时间:2023-03-30 15:15:33 CSS

作为html5开发者,我们经常面临兼容??性和新功能之间的选择。为了解决这个问题,我们会采用不同的解决方案,按照问题解决的递进关系,分为3个步骤(回避问题和解决问题):1、了解主流浏览器对html5功能开发的支持。如果能得到所需浏览器的支持,就可以使用,否则不实用。在了解了浏览器的支持后,还需要安装浏览器,这样才能进一步了解目标用户是否对新功能有足够的支持;2、针对特定用户电脑浏览器查询特定功能时,可以使用modernizr技术来支持(所谓的诊断);3mod可以使用putty脚本来解决它(所谓的治愈)以获得诊断结果。1、了解浏览器的支持情况和用户对浏览器的使用情况。可以通过专门的统计网站caniuse了解这些情况,并简单说明其用途。上图(caniuse主页截图)为网站内容。在绿框中输入你需要的html5新功能名称,即可查询对应的用法。caniuse查询结果在查询结果中可以看到各个主流浏览器不同版本对该功能的支持情况。值得注意的是,一些国产浏览器多为盒子浏览器,使用的是别人的浏览器内核。比如QQ浏览器使用的是IE内核(是否支持取决于你电脑安装的IE版本),360浏览器使用的是双核chrome+IE浏览器,百度浏览器也是双核的。具体版本可以到官网查看。这些浏览器会基于内核进行优化,所以不能简单的根据内核版本来判断是否支持,但是内核版本可以作为充要条件。2、通过modernizr检测浏览器功能通过modernizr可以判断当前浏览器是否支持某个功能。modernizr是一个js文件,可以插入到你的网页中,当前浏览器调用内部函数即可完成。一个函数的测试。使用方法如下:1.下载modernizr的js文件。2.将文件放入您的网页所在的文件夹中。3.将这个js文件的使用添加到你的网页的head标签中。4、编写脚本执行检测功能,并将结果输出到页面。3.通过putty脚本解决兼容性问题。我们已经可以使用modernizr来判断当前浏览器是否支持某个功能。但是这个结果不能帮助浏览器执行正确的现实。为了解决这个问题,我们可以借助putty脚本来解决。有putty脚本可以解决不同的html功能,但是putty脚本的质量无法保证。这是一个腻子脚本的集合