CSS3条件判断——@supports

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

上面这段代码的意思是：如果浏览器支持“display:flex”属性，那么在“section”元素上就运用“display:flex”样式。

not逻辑声明——排除

@supports not (display: flex){
 #container div{float:left;}
}

上面的代码表示的是，如果你的浏览器不支持“display:flex”属性，那么你可以使用“float:left”来替代。

and逻辑声明——联合（与）

@supports (column-width: 20rem) and (column-span: all) {
 div { column-width: 20rem } 
 div h2 { column-span: all }
 div h2 + p { margin-top: 0; }
 ...
}

上面的代码表示的是，如果你的浏览器同时支持“column-width:20rem”和“column-span:all”两个条件，浏览器将会调用下面的样式

or逻辑声明——or(或)

@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
 section {
 display: -webkit-flex;
 display: -moz-flex;
 display: flex;
 …
 } 
}

只要支持其中一种就执行里面代码

“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))) {
 // ...
}