@supports

摘要

CSS 的 `@supports` at-rule 允许作者直接在 CSS 中检测 CSS 特性的支持情况。

CSS at-rule @supports 是 CSS 条件规则模块 Level 3 草案的一部分。它允许作者根据 CSS 中是否支持特定的属性声明来设置条件规则。

换句话说，@supports 让你直接在 CSS 中检测浏览器对 CSS 特性的支持情况。 Modernizr 是一个著名的使用 JavaScript 检测特性的库。

运算符 and 和 or 允许链式检测多个特性。

示例

一个抽象的例子，检测对 display: flex (也称为 CSS 弹性盒子布局模块) 的支持。

@supports (display: flex) {
  div {
    display: flex;
  }
}

使用 and 运算符链式检测多个特性

@supports (background: rgba(0,0,0,0.2)) and (opacity: 0.8) {
  body {
    background: rgba(0,0,0,0.2);
  }

  div {
    opacity: 0.8;
  }
}

要检测是否支持带有 vendor-prefixes 的实验性特性，or 运算符可能很有帮助

(此示例不包括 -o- 和 -ms- 前缀，因为 Opera 和 Microsoft 都未支持 box-shadow 的前缀版本。)

@supports (-webkit-box-shadow: 0 0 2px #000) or
          (   -moz-box-shadow: 0 0 2px #000) or
          (        box-shadow: 0 0 2px #000) {

  div {
    -webkit-box-shadow: 0 0 2px #000;
       -moz-box-shadow: 0 0 2px #000;
            box-shadow: 0 0 2px #000;
  }
}

用法

 Browser support for this feature is still pretty limited.

@supports

摘要

示例

用法

相关规范

参见

相关文章

语法

外部资源