CSS:@supports

概述

@supports 可以让我们根据浏览器是否支持某些特性，来写出有条件的 CSS 样式。

详细文档

使用

条件支持与或非等操作：

/* 如果浏览器支持 display: grid 则，设置 div 为 grid */
@supports (display: grid) {
  div {
    display: grid;
  }
}

/* 如果浏览器不支持 display: grid 则，设置 div 为 float */
@supports not (display: grid) {
  div {
    float: right;
  }
}

/* 如果支持 grid 且不支持 inline-grid */
@supports (display: grid) and (not (display: inline-grid)) {
}

/* 如果支持 transform-style: preserve 或者-moz-transform-style: preserve */
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {
}