CSS 属性兼容性判断方法

[nmsn]

如题

[nmsn]

CSS

@supports <条件规则> {
  /* 特殊样式规则 */
}

eg:

@supports (display:flex) {
  section { display: flex }
  ...
} 

意思就是如果支持 display: flex 的话，就在 section 中应用

JS

在 window 上提供方法 CSS.supports('属性', '属性值')

eg:

const  supportsFlex = CSS.supports("display", "flex");    

当然，使用前先判断下兼容性如何

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

// window.supportsCSS 为旧版 api