css 判断当前页面,CSS @supports （CSS3条件判断）

用JavaScript在客户端检测浏览器是否支持某项功能特征，目前虽然这是最可行的方法，但不好的是，对于同一个特征的检测，我们需要反复多次用相同的函数附带各种浏览器前缀。而且因为CSS没有相应的功能，使用JavaScript会导致页面闪现，多余辅助代码等问题。火狐浏览器，谷歌浏览器和Opera浏览器最近刚刚添加了一项新的功能——在CSS里支持@supports标记、在JavaScript里支持CSS.supports函数，用来检测浏览器是否支持某个期望的样式功能。下面让我们来看看是如何使用的！

CSS @supports

CSS @supports标记在CSS代码里跟@media查询语句的语法相似：

@supports(prop:value) {

/* 各种样式 */

}

CSS @supports允许程序员用多种不同的方法来探测当前浏览器是否支持某项CSS样式特征。

基本属性检测

你可以执行对基本属性和属性值的检测：

@supports (display: flex) {

div { display: flex; }

}

这是@supports标记最基本的用法。

not关键字

@supports标记可以和‘not’关键字组合，用来应对不支持的情况：

@supports not (display: flex) {

div { float: left; } /* 替换样式 */

}

组合条件检测

对多个CSS属性的检查可以通过‘or’和‘and’串联起来&#x