css条件判断之@supports

@supports：起源

不同的浏览器对Web页面的解析都是不一样，为了让Web页面在这些浏览器下渲染达到基本一致的情况，给用户更好的体验，我们必须为他们写不同的样式代码。

不同特征的检测方法我们早期都是依赖于javascript来检测，后来通过第三方js库Modernizr来完成。但这样真的有用吗？除了要懂怎么检测之外，我们还需要了解更多的浏览器解析机制，这样一来对于我们前端人员来说就是“没办法”。还好CSS3 Conditional Rules Module Level 3推出了“@supports”条件判断规则，它充许我们可以根据浏览器对CSS特性的支持情况来定义不同的样式。这对我们来说是非常重要。

@supports：语法规则

@supports <条件规则> {
  /* 特殊样式规则 */
}

@supports中的“条件规则”可以声明一条或者几个由不同的逻辑运算符相结合的声明（比如说，非（not），或（or），与（and）等）。而且还可以使用括号来确定其操作的优先级关系。

最简单的条件表达式是一个CSS声明，一个CSS属性名，后面加上一个属性值，属性名与属性值之前用分号隔开，比如：(display:flex)

@supports：基本属性的检查

@supports (display: flex) { /* 如果支持display: flex则应用{}中的样式 */
  div { display: flex; }
}

@supports：逻辑声明-and

@supports (column-width: 20rem) and (column-span: all) {
  div { column-width: 20rem }
  div h2 { column-span: all }
  div h2 + p { margin-top: 0; }
}

@supports：逻辑声明-not

@supports not (display: flex){
  #container div{float:left;}
}

@supports：逻辑声明-or

@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
  section {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    …
  }
}

未经允许不得转载：鹞之神乐 » css条件判断之@supports