您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 @supports

2018-8-17 01:18| 作者: admin| 查看: 669| 评论: 0|来自: 蚂蚁部落

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*/
}

鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS3 filter属性下一篇:CSS3 pointer-events

最新评论

返回顶部