@supports（）会检测括号中的声明，在浏览器支持该声明的情况下执行花括号中的代码。

基本属性检测

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

not关键字

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

组合条件检测

@supports (display: flex) and (-webkit-appearance: caret) {

}

也可以用括号将多个条件进行嵌套关联

/* and and or */
@supports ((display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex)) and (-webkit-appearance: caret) {

    /* use styles here */
}