CSS @supports 规则

定义和用法

CSS @supports 规则用于测试浏览器是否支持某个 CSS 特性，并在不支持时定义备用样式。

实例

如果浏览器支持 display: grid，则应用 @supports 规则内的 CSS。如果不支持，则应用 @supports 规则外的 .container 类样式：

/* 如果浏览器不支持 display: grid，则使用此 CSS */
.container {
  display: table;
  width: 90%;
  background-color: #2196F3;
  padding: 10px;
}

/* 如果浏览器支持 display: grid，则使用此 CSS */
@supports (display: grid) {
  .container {
    display: grid;
    grid: auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
}

亲自试一试

CSS 语法

@supports (supports-condition) {
  /* 如果条件为真，则应用此 CSS */
}

属性值

浏览器支持

表格中的数字表示首个完全支持该 @ 规则的浏览器版本。