@supports

语法

  • @supports (rule)[operator (rule)]* { sRules }
  • operator:or | and | not

取值

  • rule:指定一条具体的CSS规则,必须使用括号包裹
  • operator:使用or | and | not等操作符指定多条规则。

说明

检测是否支持某CSS特性

  • 定义支持和不支持flex标准写法的浏览器分别使用不同的规则:

示例代码:

@supports ( display: flex ) {
    body {
        display: flex;
    }
    #aside {
        width: 210px;
    }
    #main {
        flex: auto;
    }
}

@supports not ( display: flex ) {
    #aside {
        float: left;
        width: 210px;
    }
    #main {
        overflow: hidden;
        *zoom: 1;
    }
}

我们可以通过类似这样的写法来给不同的终端使用差异化的方案。

  • 你也可以写多重规则来进行过滤:

示例代码:

@supports ( box-shadow: 2px 2px ) or
          ( -moz-box-shadow: 2px 2px ) or
          ( -webkit-box-shadow: 2px 2px ) {
    .demo {
        -moz-box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
        -webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
        box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
    }
}

兼容性

IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
6.0-11.0 2.0-21.0 4.0-27.0 6.0-8.0 15.0+ 6.0-8.4 2.1-4.3 18.0-26.0
12.0+ 22.0+ 28.0+ 9.0+ 9.0+ 4.4+ 27.0+

示例


<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<style>
@supports ( display: flex ) {
    body {
        display: flex;
    }
    #aside {
        width: 210px;
    }
    #main {
        flex: auto;
    }
}

@supports not ( display: flex ) {
    #aside {
        float: left;
        width: 210px;
    }
    #main {
        overflow: hidden;
        *zoom: 1;
    }
}
</style>
</head>
<body>
<div id="aside">aside</div>
<div id="main">main</div>
</body>
</html>