CSS与JS关于supports

CSS与JS关于supports

CSS

常规 @supports

@supports(display: flex) {
    div {
        display: flex;
    }
}

not 语法

@supports not(display: flex) {
    div {
        display: block;
    }
}

条件语法, 可以括号

@supports(display: flex1) or
(display: flex2) and
(display: flex3) {
    div {
        display: block;
    }
}

JS

常规

let supportsFlex = CSS.supports("display","flex")
条件

let supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)")
特殊浏览器语法兼容

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