supporst属性

发表于

@supports是CSS3新引入的规则之一，主要用于检测当前浏览器是否支持某个CSS属性并加载具体样式。

1、基本使用

1
2
3
4
5
@supports (display: grid) {
    .container {
        color: red;
    }
}

类似@media媒体查询，当浏览器支持display:grid这个CSS属性时才应用其中的样式。


2、逻辑运算

1
2
3
4
5
6
7
8
/**not*/
@supports not(display: grid){...}

 /**and*/
@supports (display: grid) and (position: sticky){...}

/**or*/
@supports (display: grid) or (display: flex){...}


注：括号内不一定都要是“关键字”，只要是CSS语法都可以 

1
@supports (border-radius: 4px) or (--btn-color: red){...}


3、js方法查询

1
2
3
if(CSS.supports('display', 'grid')){
    alert('it support!');
}