这篇文章是关于CSS3条件判断的,你并没有看错,我也没有写错,如果你开发过响应式布局,应该会知道CSS3中的“@media”就是条件判断之一,不过,在这里,并不是去讨论“@media”的,而是来谈谈CSS3的条件判断规范文档中的另一部分:“@supports”规则。
在早期,我们为了兼容CSS3,一般情况下,我们会通过第三方js库Modernizr来完成,不过,这种方式,我们需要反复多次用相同的函数附带各种浏览器前缀,容易造成很多多余的代码,但现在,我们可以使用CSS3的“@supports”来判断浏览器是否支持某个CSS属性,并且根据是否支持来定义样式。
下面我们就来看看如何使用“@supports”!
一、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两个混合使用时,必须使用括号()来区分两者的优先级。如果只有一条表达式时,也必须使用括号()。
二、window.CSS.supports
在JavaScript中,使用window.CSS.supports来支持CSS的@supports。
在使用之前,当前是先检测一下是否支持(Opera浏览器使用了一种完全不同的名称window.supportsCSS):
var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false);
语法
它有两种写法:
第一种写法:
CSS.supports(property, value)
第二种写法:
CSS.supports('property: value');
这种写法可以写入非(not)、与(and)、或(or)连接的字符串。
注意:当以字符串形式传入时,使用or和and两个混合使用,必须使用括号()来区分两者的优先级。如果只有一条表达式时,也必须使用括号()。
例子:CSS.supports('display','flex') === CSS.supports('(display: flex)') // true
兼容性
从上面可以看出,@supports的兼容性已经很高了。
总结
在这篇文章里,只是简单的介绍如何使用CSS3 条件判断@supports 以及JavaScript中的CSS.supports()来判断浏览器是否支持这些最新的属性。如果支持将返回的是一个true,将会渲染对应的样式;如果不支持,则将返回false,将不会渲染对应的样式。