- HTML中文网
- 联系QQ：88526
- QQ交流群
- 微信公众号
前端控
更新时间：2019-01-30 14:30:01
@supports
@supports (rule)[operator (rule)]* { sRules }
operator：or | and | not
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>
<meta charset="utf-8" />
<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>
点击 "运行实例" 按钮查看在线实例
推荐手册