@supports
@supports CSS at-rule 关联了一组嵌套的CSS语句,这些语句被放置在一个CSS区块中,该区块以大括号分割, 还有一个由多个CSS声明检测组成的条件,它是一个键值组合, 由逻辑与,逻辑或,逻辑非组合而成. 这样的条件语句称为支持条件。
语法
@supports <supports_condition> {
/* 特殊样式规则 */
}
值
| 值 | 描述 |
|---|---|
| <supports_condition> | 可以声明一条或者几个由不同的逻辑运算符相结合的声明（比如说，非（not），或（or），与（and）等）。而且还可以使用括号来确定其操作的优先级关系。 |
例子
基本方法
/*使用CSS的基本属性来进行检查：*/
@supports (display: flex) {
div { display: flex; }
}
not声明——排除
@supports可以使用not逻辑声明，主要作用是，在不支持新特性时，可以提供备用样式。换过来也可以理解，如果你的浏览器不支持@supports条件判断中的样式，你可以通过@supports为浏览器提供一种备用样式，如：
@supports not (display: flex){
#container div{float:left;}
}
and逻辑声明——联合（与）
@supports的条件判断中也可以使用“and”逻辑声明。用来判断是否支持多个属性。反之，如果不同时支持这两个条件，那么浏览器将不会调用这部分样式。
@supports (column-width: 20rem) and (column-span: all) {
div { column-width: 20rem }
div h2 { column-span: all }
div h2 + p { margin-top: 0; }
...
}
or逻辑声明——or(或)
@supports除了“not”和“and”逻辑声明之外，还可以使用“or”逻辑声明。主要用来判断浏览器是否支持某一CSS特性。也就是说，可以使用“or”逻辑声明，同时专声明多个条件，只要其中一个条件成立就会启用@supports中的样式：
@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
section {
display: -webkit-flex;
display: -moz-flex;
display: flex;
…
}
}
“or”和“and”混用
在@supports中“or”和“and”混用时，必须使用括号（）来区分其优先级：
@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) {
// ...
}
@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) {
// ...
}
只有一条表达式时必须用括号（）
@supports (display: flex) {
// ...
}