©
이 문서에서는 PHP 중국어 웹사이트 매뉴얼 풀어 주다
@supports (rule)[operator (rule)]* { sRules }
operator：or | and | not
rule：指定一条具体的CSS规则，必须使用括号包裹
operator：使用or | and | not等操作符指定多条规则。
定义支持和不支持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" />
<title>@supports_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<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>
点击 "运行实例" 按钮查看在线实例