特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
CSS3条件判断,听起来“不明觉厉”,如果你对CSS稍为熟悉一点的话,你会发现CSS中的“@media”就是条件判断之一。是的,在CSS3的条件判断规范文档中包含了两个部分,其一是“@media”规则,主要用来“根据媒体属性区分样式表”(特别是在Responsive设计中,发挥的作用更是强大);其二是“@supports”规则,主要用来代替前面常用的Modernizr库,在不支持CSS3的浏览器下实现渐进增强式设计。换句话来说,@supports可以让我们在不支持CSS3属性的浏览器下配上单独的样式,看起来很强大,那具体如何使用呢?我们今天一起简单的来学习一下:
@supports起源
众所周知,不同的浏览器(不管是现代浏览器还是老版本的IE浏览器)对Web页面的解析都是不一样,为了让Web页面在这些浏览器下渲染达到基本一致的情况,给用户更好的体验,我们必须为他们写不同的样式代码。
不同特征的检测方法我们早期都是依赖于javascript来检测,后来通过第三方js库Modernizr来完成。但这样真的有用吗?除了要懂怎么检测之外,我们还需要了解更多的浏览器解析机制,这样一来对于我们前端人员来说就是“没办法”。还好CSS3 Conditional Rules Module Level 3推出了“@supports”条件判断规则,它充许我们可以根据浏览器对CSS特性的支持情况来定义不同的样式。这对我们来说是非常重要。
@supports语法规则
要想更好的使用@supports,我们有必要先从其语法开始入手,只有知道了怎么用,我们才能更好的去用。
@supports <条件规则> { /* 特殊样式规则 */ }
@supports中的“条件规则”可以声明一条或者几个由不同的逻辑运算符相结合的声明(比如说,非(not),或(or),与(and)等)。而且还可以使用括号来确定其操作的优先级关系。
最简单的条件表达式是一个CSS声明,一个CSS属性名,后面加上一个属性值,属性名与属性值之前用分号隔开,比如:
(display:flex)
我们来看一个简单的例子:
@supports (display:flex) { section { display: flex } ... }
上面这段代码的意思是:如果浏览器支持“display:flex”属性,那么在“section”元素上就运用“display:flex”样式。
@supports还可以根据不同的逻辑运算符相结合,具有不同的语法规则,接下来我们一起来细化一下@supports的语法规则,以及使用细节。
基本属性的检查
正如前面的示例一样,你可以使用CSS的基本属性来进行检查:
@supports (display: flex) { div { display: flex; } }
这种是@supports最基本的使用规则。
not逻辑声明——排除
@supports可以使用not逻辑声明,主要作用是,在不支持新特性时,可以提供备用样式。换过来也可以理解,如果你的浏览器不支持@supports条件判断中的样式,你可以通过@supports为浏览器提供一种备用样式,如:
@supports not (display: flex){ #container div{float:left;} }
上面的代码表示的是,如果你的浏览器不支持“display:flex”属性,那么你可以使用“float:left”来替代。
and逻辑声明——联合(与)
@supports的条件判断中也可以使用“and”逻辑声明。用来判断是否支持多个属性。例如:
@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”两个条件,浏览器将会调用下面的样式:
div { column-width: 20rem } div h2 { column-span: all } div h2 + p { margin-top: 0; } ...
反之,如果不同时支持这两个条件,那么浏览器将不会调用这部分样式。
注:多个and边接并不需要使用括号:
@supports (display: table-cell) and (display: list-item) and (display:run-in){ /*样式*/ }
or逻辑声明——or(或)
@supports除了“not”和“and”逻辑声明之外,还可以使用“or”逻辑声明。主要用来判断浏览器是否支持某一CSS特性。也就是说,可以使用“or”逻辑声明,同时专声明多个条件,只要其中一个条件成立就会启用@supports中的样式:
@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { section { display: -webkit-flex; display: -moz-flex; display: flex; … } }
上面的例子是@supports中“or”运用场景之一。flex在opera和IE10中不需要前缀,而在其他的现代浏览器中还是需要浏览器厂商的前缀,通过上面的使得,浏览器支持“flex”属性就会调用下面的样式:
section { display: -webkit-flex; display: -moz-flex; display: flex; … }
上面是有关于@supports的几种语法的使用规则介绍,在使用这几种规则时,有几点需要特别注意:
“or”和“and”混用
在@supports中“or”和“and”混用时,必须使用括号()来区分其优先级:
@supports ((transition-property: color) or (animation-na
如需转载,烦请注明出处:https://www.w3cplus.com/css3/css3-supports.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!