CSS3 @supports

CSS3的属性在当前并没有被所有的浏览器所支持。

为了在各个浏览器实现大致一样的效果，会首先判断浏览器是否支持此属性。

如果支持那么就应用此属性，否则就通过其他方式模拟实现。

当前通常使用Modernizr库来实现判断功能，不过CSS3也提供了@supports实现判断。

不过好像此属性当前应用并不是太多，因为不少浏览器本身就不支持此属性，那如何实现判断。

随着软硬件水平的提高，浏览器都支持此属性，那么新加入的CSS属性的支持度就可以利用它判断。

语法结构：

[CSS] 纯文本查看 复制代码
@supports <条件规则> {
  /* code */
}

浏览器兼容性：

（1）.IE浏览器不支持此属性。

（2）.谷歌浏览器支持此属性。

（3）.火狐浏览器支持此属性。

（4）.opera浏览器支持此属性。

（5）.safria浏览器支持此属性。

（6）.Edge浏览器支持此属性。

下面就通过简单的代码片段介绍一下它的使用方式。

代码实例:

[CSS] 纯文本查看 复制代码
@supports (display:flex) {
  section { display: flex }
  /* 其他code*/
}

上面的代码判断是否支持display:flex，如果支持就执行大括号中的代码。

关于display:flex可以参阅display:flex弹性布局一章节。

@supports还可以与逻辑运算符配合使用，下面分别做一下介绍:

一.not逻辑运算符：

它表示如果不支持后面的条件：

[CSS] 纯文本查看 复制代码
@supports not (display: flex){
  #container div{float:left;}
}

表示如果不支持display: flex，那么就应用大括号中的样式。

二.and逻辑与运算符：

表示要同时满足指定条件：

[CSS] 纯文本查看 复制代码
@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才会执行大括号中的代码。

column-width可以参阅CSS3 column-width一章节。

column-span可以参阅CSS3 column-span一章节。

三.or逻辑或运算符:

表示只要满足其中一个条件就可以:

[CSS] 纯文本查看 复制代码
@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
  section {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    /*其他代码*/
  }         
}

只要满足条件之一，那么就执行大括号中的代码。

四.逻辑与和逻辑或混用:

在@supports中or和and混用时，必须使用括号()来区分其优先级：

[CSS] 纯文本查看 复制代码
@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) {
  /*code*/
}
@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) {
  /*code*/
}