阅读(697) 赞(2)

CSS3-条件判断（@supports）

2017-06-19 18:37:37 更新

这篇文章是关于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，将不会渲染对应的样式。

推荐文章