原创作品,转载需得到原作者书面许可,同时保留原作者和出处,否则将追究法律责任。
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*/ }
前端教程
HTML5 API
鲁ICP备10022556号-3
鲁公网安备 37021302000666号
关于我们
|手机版|小黑屋|
Copyright © 2012-2020 Design: 蚂蚁部落
最新评论