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

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

一、原生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.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

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

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

解决v-lazy-image在qq浏览器x5内核下无效

在安卓qq浏览器中,v-lazy-image始终无法显示。经调试,发现qq浏览器中IntersectionObserver缺少一个isIntersecting字段,而v-lazy-image插件是根据isIntersecting来显示图片的

浏览器的回流与重绘 (Reflow & Repaint)

浏览器使用流式布局模型 (Flow Based Layout)。浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了Render Tree。有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。

html5的pushstate以及监听浏览器返回事件

实际开发我们在A页面调用组件,在组件里面填好内容之后,发现想退出不想填了,因为组件与A页面此时在同一页面,点击返回时候 给人感觉是返回上上个页面,但之前A页面填写的东西 都没有了,这很影响体验。

Puppeteer浏览器控制器_介绍Puppeteer的一些用法

Puppeteer是Chrome团队开源的Node库,其提供基于DevTools协议的高阶API让开发人员能够控制Headless Chrome、Chromium、Chrome等浏览器,通过Puppeteer能够将平时手动使用浏览器的操作通过代码的方式自动化执行

微软新 Edge 有时会假扮成不同浏览器

Chromium 版 Microsoft Edge 近日被发现会根据所访问的站点模拟其他浏览器。这可能是出于兼容性原因。随着新版 Edge 的发布,微软现在使用 Chromium Blink 引擎而不是原始的 EdgeHTML 引擎。

JS 识别安卓还是ios苹果、识别是否微信内置浏览器、手机类型

识别手机平台是IOS还是安卓;识别是否微信内置浏览器;识别移动终端手机品牌

浏览器多标签页通信

浏览器多标签页通信有助于降低服务器负载,提高运营人员的工作效率,提高用户体验。是前端开发优化的一个重要环节。分别是使用cookie、使用websocket协议、通过localstorage、以及使用html5浏览器的新特性SharedWorker,每种方法各有利弊。如果不考虑兼容旧的浏览器,superSharedWorker 或许是最好的解决方案

浏览器会内置类react框架

从Prototype.js到风靡全球的jQuery.js,都是在解决浏览器间DOM操作的差异化问题,同时也提供了简洁友好的API,但是随着标准的不断的推进,现在浏览器间的差异化可以说已经没有了

浏览器执行js原理

是不是大都数前端开发者都会有这样的疑惑,确实,我自己在开发的过程中每次碰到promise,setTimeout,requestAnimationFrame都会去想,在这个执行的过程中到底发生了什么?

「译」无处不在的微浏览器

你已经在各个地方见到了它 —— Tweet 里提及到的网站的小型缩略预览图,Slack 频道或者 Whatsapp 群聊里详细的网站描述。这些链接的预览图对大多数人来说司空见惯,因此我们很少留意网站设计对生成的预览的影响。然而

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

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

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