浏览器兼容辅助:什么是CSS.supports,有什么用?

做前端开发,兼容的重要性不言而喻。那么对于繁杂的CSS属性,我们怎么知道浏览器是支持还是不支持呢?知道这些支持情况,就可以在代码里面做处理了。

浏览器兼容辅助:什么是CSS.supports,有什么用?

有请CSS.supports闪亮登场啦:
1.如果要兼容一些旧的浏览器,可以使用 Modernizr
2.现代浏览器可以直接使用「css.supports()」API。

「CSS.supports()」 DOM API 是 CSS 中「@supports」的另一种形式,供 JavaScript 调用并检测 CSS 属性的支持情况。

先看看CSS代码支持的@supports,用法如下:括弧里的参数就是:“key: value”的形式。

@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { /* use styles here */ 可以放心的用了-webkit-flex、-moz-flex、flex了 这里表示这三个会至少支持一个,保险考虑,可以三个都写 } /* and */ @supports (display: flex) and (-webkit-appearance: caret) { /* something crazy here */ 这里表示这两个都支持,可以放心的使用。 }

再看看@supports在Javascript代码里的用法:

var supports3d = CSS.supports("(transform-style: preserve-3d) or (-moz-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d)"); if (supports3d) { alert('我支持啦,感觉自己萌萌哒(?ω?)'); } else { alert('伦家还不支持捏(▔□▔)'); }

实际上,Modernizr 3.0 中已经使用了原生的「css.supports()」API:https://github.com/Modernizr/Modernizr/issues/818

此用法兼容性:

Chrome 28 开始支持 CSS.supports()
Safari 目前还不支持,iOS8待测试。
Android 4.4+ 支持。
Firefox 在12年的8月份支持了@supports,在12月份支持了CSS.supports()。

需要注意的是,Opera 12.1 之前版本实现的是非最新标准的API,为了兼容,代码看起来要一坨了:

var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false);

相关阅读