CSS3 条件判断, 听起来 "不明觉厉", 如果你对 CSS 稍为熟悉一点的话, 你会发现 CSS 中的 "@media" 就是条件判断之一. 是的, 在 CSS3 的条件判断规范文档中包含了两个部分.
其一是 "@media" 规则, 主要用来 "根据媒体属性区分样式表";
其二是 "@supports" 规则, 主要用来代替前面常用的 Modernizr 库, 在不支持 CSS3 的浏览器下实现渐进增强式设计.(相关课程推荐: CSS 视频教程 https://www.html.cn/css/ )
要想更好的使用 @supports, 我们有必要先从其语法开始入手, 只有知道了怎么用, 我们才能更好的去用.
@supports <条件规则> {
- /* 特殊样式规则 */
- }
@supports 中的 "条件规则" 可以声明一条或者几个由不同的逻辑运算符相结合的声明 (比如说, 非(not), 或(or), 与(and) 等). 而且还可以使用括号来确定其操作的优先级关系.
最简单的条件表达式是一个 CSS 声明, 一个 CSS 属性名, 后面加上一个属性值, 属性名与属性值之前用分号隔开, 比如:
(display:flex)
我们来看一个简单的例子:
- @supports (display:flex) {
- section { display: flex }
- }
上面这段代码的意思是: 如果浏览器支持 "display:flex" 属性, 那么在 "section" 元素上就运用 "display:flex" 样式.
基本属性的检查
正如前面的示例一样, 你可以使用 CSS 的基本属性来进行检查:
- @supports (display: flex) {
- div { display: flex; }
- }
这种是 @supports 最基本的使用规则.
本文来自 CSS 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/14410.html