一、CSS3 @supports

 

　　1、常见用法

 

　　语法：

 

　　@supports (property: value){

 

　　element {

 

　　property: value;

 

　　}

 

　　}

 

　　“@supports”中的“条件规则”可以声明一条或者几个由不同的逻辑运算符相结合的声明(比如说，非(not)，或(or)，与(and)等)，而且还可以使用括号来确定其操作的优先级关系。

 

　　比如：Flex布局

 

　　.flex {

 

　　float: left;

 

　　}

 

　　@supports (display: flex){

 

　　.flex {

 

　　display: flex;

 

　　float: none;

 

　　}

 

　　}

 

　　上面的代码可以用来应对那些不支持Flex布局的浏览器。

 

　　2、非(not)逻辑声明

 

　　@supports not (property: value){

 

　　element {

 

　　property: value;

 

　　}

 

　　}

 

　　当使用not时，表示浏览器不支持某些属性时，对应的样式将会渲染。

 

　　3、与(and)逻辑声明

 

　　@supports (property: value) and (property: value) {

 

　　element {

 

　　property: value;

 

　　}

 

　　}

 

　　当使用and时，只有and两端条件同时成立，也就是同时返回true时，对应的样式才会渲染。

 

　　4、或(or)逻辑声明

 

　　@supports (property: value) or (property: value) {

 

　　element {

 

　　property: value;

 

　　}

 

　　}

 

　　当使用or时，只要or两端任一条件成立，返回true，对应的样式就会渲染。

 

　　5、组合声明

 

　　@supports ((property: value) or (property: value)) and (property: value) {

 

　　element {

 

　　property: value;

 

　　}

 

　　}

 

　　注意：当使用or和and两个混合使用时，必须使用括号()来区分两者的优先级。如果只有一条表达式时，也必须使用括号()。