详解CSS中@supports的用法

2020-05-02 08:16:01易采站长站整理

CSS Code复制内容到剪贴板

result = CSS.supports("text-decoration-style", "blink");     
result = CSS.supports("display", "flex");     
result = CSS.supports("( transform-origin: 5% 5% )");     
result = CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or ( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )" );    

用途

最大的用途是做css特性判断的时候,不用再在js(或者传统的js方法)了,用过modernizr.js的同学可能会印象很深刻,modernizr会在html标签上加上各种各样的class来区分,其它js方法也是类似的实现思路。现在可以直接用@supports来区分或者做浏览器差异化了。
浏览器支持

    chrome 28+
    opera 12.1+
    firefox22+
    safari 9+