css supports

说到 CSS Supports，它是一个非常有用的特性，可以让我们写更加灵活的 CSS 代码。在 CSS 中，支持条件语句的功能十分有限，但 CSS Supports 就可以解决这个问题。它可以用来检查浏览器是否支持某些特定的 CSS 属性，如果支持，就可以执行对应的 CSS 规则，否则就执行后备规则。

/* 检查浏览器是否支持 display: flex */
@supports (display: flex) {
  body {
    display: flex;
  }
}

/* 如果不支持 display: flex，就使用 float 属性 */
@supports not (display: flex) {
  .box {
    float: left;
    margin-right: 10px;
  }
}

这里的 @supports 就是关键字，它接收一个括号内的条件，判断当前浏览器是否支持括号中的属性值。如果支持，就执行花括号中的 CSS 规则，否则执行后备规则。

可以通过多层嵌套的 @supports 规则来创建更加复杂的条件测试。下面是一个例子：

/* 检测浏览器是否支持 display: grid 和 grid-template-columns 属性 */
@supports (display: grid) {
  @supports (grid-template-columns: repeat(2, 1fr)) {
    #my-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

/* 如果不支持 display: grid 或者 grid-template-columns 属性，就使用 float 和 width */
@supports not (display: grid) or not (grid-template-columns: repeat(2, 1fr)) {
  #my-grid {
    float: left;
    width: 50%;
  }
}

因为浏览器都是根据对应的 CSS 规范来解析和渲染 HTML 页面的，所以 CSS Supports 的使用十分广泛。可以通过它来检测浏览器是否支持某些 CSS 属性，从而写出更加健壮的 CSS 代码。