JS检测CSS属性浏览器是否支持的多种方法

时间: 2019-11-07阅读: 65标签: 浏览器

一、原生CSS.supports语法

返回布尔值 true 或者 false ,用来检测是否支持某CSS属性。

语法

CSS.supports(propertyName, value);
CSS.supports(supportCondition);

参数

propertyName
字符串。用来检测的CSS属性名。
value
字符串。用来检测的CSS属性值。
supportCondition
字符串。用来检测的CSS声明、表达式或者语法。

案例

例如,检测浏览器是否支持CSS filter滤镜,则可以:

result = CSS.supports('filter', 'blur(5px)');
result = CSS.supports('filter: 5px');   // 错误语法,返回false

例如在Chrome浏览器下返回:


CSS.supports() 还可以用来检测表达式,例如CSS变量语法:

result = CSS.supports('--username: zhangxinxu');
result = CSS.supports('(--username: zhangxinxu)');

结果如下图所示:


可以看到有没有括号都支持。

CSS.supports() 还支持 @supports 规则,支持逻辑表达,例如:

result = CSS.supports('width: fit-content or width: -webkit-fit-content');
result = CSS.supports('(width: fit-content) or (width: -webkit-fit-content)');

可见,此时括号是必须的:


兼容性

和CSS @supports 规则兼容性一样,Edge12+支持。


尴尬的现状

实际开发的时候,需要使用到对CSS检测场景,往往都是针对低版本的IE浏览器,例如IE9-IE11。

于是尴尬的事情出现了,低版本的IE浏览器并不支持浏览器原生支持的 CSS.supports() 方法,于是,我们的实际需求并没有因为这个新的API而得到解决,不得不求助于其他方法。


二、JS赋值再取值的检测方法

这是我 张鑫旭 https://www.zhangxinxu.com 在实际项目中经常使用的一种方法,原理很简单,当浏览器不支持某个CSS属性的时候,就算你强制设置,获取的计算值也不会是你设置的属性值,还是检测浏览器是否支持CSS filter滤镜的例子。

我会这么处理:

document.head.style.filter = 'blur(5px)';
result = window.getComputedStyle(document.head).filter == 'blur(5px)';

我们看下上面代码在实际浏览器中的表现,首先是支持的Chrome浏览器, result 的值是 true :


然后是不支持的IE11浏览器, result 的值是 false :


此方法原理很简单,兼容性也非常好,实现的关键点就是使用 getComputedStyle这个IE9+支持的DOM API方法 ,不能使用 dom.style.xxxx 直接获取。

如果是想要实现类似or或者and逻辑,例如带私有前缀那种,可以下面这样处理,正则匹配关键的部分:

document.head.style.width= 'fit-content';
document.head.style.width= '-moz-fit-content';
result = /fit-content/.test(window.getComputedStyle(document.head).width);

例如Firefox浏览器下的结果:


兼容性

IE9+

注意点

getComputedStyle() 方法返回的是计算值,很多时候和设置的属性值并不同。

例如设置行高为小数,在IE浏览器下返回就是px计算值。

又或者设置 background 属性值,结果返回的是background兄弟姐妹一大家子值:

document.head.style.background = 'paint(abc)';
result = /paint/.test(window.getComputedStyle(document.head).background);
// reseult值是true
window.getComputedStyle(document.head).background
// "rgba(0, 0, 0, 0) paint(abc) repeat scroll 0% 0% / auto padding-box border-box"


需要使用模糊匹配才行。


三、其他方法

核心思想类似:

document.head.setAttribute('style', 'filter: blur(5px)');
result = !!document.head.style.filter;

Chrome和IE下验证检测结果图:



总结一下

不考虑兼容性,对CSS的进行检测使用 CSS.supports() 方法,要检测IE浏览器使用赋值取值法。

本文地址: https://www.zhangxinxu.com/wordpress/?p=9051 

 

吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 网页游戏  直播/交友   H5游戏

链接: http://www.fly63.com/article/detial/6342

浏览器内核分类

五大浏览器:IE、Firefox、Chrome、Safari和Opera。渲染引擎 它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机

浏览器重绘(repaint)重排(reflow)与优化

很多人都知道要减少浏览器的重排和重绘,但对其中的具体原理以及如何具体操作并不是很了解,当突然提起这个话题的时候,还是会一脸懵逼。希望大家可以耐着性子阅读本文,仔细琢磨,彻底掌握这个知识点!

js判断浏览器内核是否是safari浏览器

PC端只有Chrome有Safari字段吗?为什么不需要判断其他浏览器?其实360,QQ等浏览器的userAgent字段也会带有Safari字段,但是由于他们基于Chrome二次开发的,所有也会携带有Chrome字段。

Js详细判断浏览器运行环境

看到标题,大家就能想起这个需求在很多项目上都能用到。我们部署在Web服务器上的前端应用,既可以用PC浏览器访问,也可以用手机浏览器访问,再加上现在智能设备的推广,我们甚至能在车载系统、穿戴设备和电视平台上访问

不同浏览器的内核

网页上所用到的语言有:html, css, JavaScript等,其中,前两者通常决定了该页面长什么样,它们是可以说都是约定的规范。不同的浏览器在获取到某页面的代码文件后,负责根据这套规范将代码渲染出来呈现给用户

Js实现阻止浏览器返回的功能

无论pc端还是移动端,浏览器都会带有后退按钮或后退键.主要方便我们能返回以前访问过的页面,但有时候我们不得不关闭这个功能.尤其是对于一些推广落地页,用户进入后不希望它返回

完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题

h5活动页面底部有个悬浮图片按钮,使用fixed悬浮定位在底部,但是在安卓端的百度浏览器下打开,却发现该图片一闪而过,在百度浏览器中消失不见。

浏览器的三种Js弹窗方式

在做网页时,常常使用弹窗,以上就是浏览器的三种弹窗方式, alert 在测试时常用; confirm 可以套用if...else 来用 ,比如 :confirm点击了确定做什么事情,点击了取消又做什么事情;prompt 弹窗输入 ; 可以给网页设置密码。

火狐浏览器 访问所有HTTPS网站显示连接不安全解决办法

当 Firefox 连接到一个安全的网站时(网址最开始为“https://”),它必须确认该网站出具的证书有效且使用足够高的加密强度。如果证书无法通过验证,或加密强度过低,Firefox 会中止连接到这个网站,并显示“连接不安全”的错误信息页面。

GeckoView:Mozilla面向移动浏览器打造的渲染引擎

Mozilla 现已推出面向 Android 的全新移动浏览器 Firefox Preview。与大多数浏览器所采用的 Bink 渲染引擎不同,Firefox Preview 的渲染引擎 GeckoView 由 Mozilla 自行开发

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全