如何使用 @supports 规则检测浏览器是否支持特定的 CSS 特性？

推荐答案

使用 @supports 规则可以检测浏览器是否支持特定的 CSS 特性。其基本语法如下：

@supports (property: value) {
  /* 如果浏览器支持该特性，则应用这里的样式 */
}

例如，检测浏览器是否支持 display: grid：

@supports (display: grid) {
  .container {
    display: grid;
  }
}

还可以使用逻辑运算符 not, and, or 来组合多个特性检测：

// www.javascriptcn.com code example
/* 检测是否不支持 grid */
@supports not (display: grid) {
  .container {
    display: block; /* Fallback */
  }
}

/* 检测是否同时支持 grid 和 backdrop-filter */
@supports (display: grid) and (backdrop-filter: blur(5px)) {
  .container {
    display: grid;
    backdrop-filter: blur(5px);
  }
}

/* 检测是否支持 grid 或者 flexbox */
@supports (display: grid) or (display: flex) {
  .container {
     /* 如果支持grid 或者 flex， 使用对应的布局*/
  }
}

本题详细解读

@supports 规则是 CSS 中一个非常强大的特性查询工具，允许开发者在 CSS 中根据浏览器是否支持特定的 CSS 属性或值来应用不同的样式。 这使得我们能够利用现代 CSS 特性，同时为不支持这些特性的旧浏览器提供回退方案。

基本语法:

@supports 规则的基本语法包括 property 和 value 的组合，即：

@supports (property: value) {
  /* 如果浏览器支持该特性，则应用这里的样式 */
}

• property: 指你要检测的 CSS 属性，例如 display, color, background 等。
• value: 指你要检测的该属性的值，例如 grid, red, linear-gradient(to right, red, blue) 等。
• 如果浏览器支持指定的属性和值，则花括号内的 CSS 规则会被应用。

逻辑运算符:

@supports 还支持使用逻辑运算符 not， and， or 来进行更复杂的条件判断：

• not: 用于否定一个条件。如果 not 后面的条件为真，整个 not 表达式则为假。
• and: 用于组合多个条件，只有当所有的条件都为真时，整个 and 表达式才为真。
• or: 用于组合多个条件，只要有一个条件为真，整个 or 表达式就为真。

使用场景:

• 渐进增强: 使用 @supports 可以先使用现代 CSS 特性，如果浏览器不支持，则使用回退样式，实现渐进增强。
• 兼容性处理: 针对不同浏览器对 CSS 特性的支持程度不同，可以使用 @supports 来提供特定浏览器的样式。
• 特性检测: 可以在 CSS 中判断浏览器是否支持某些不常用的 CSS 属性或者值，并给予相应的提示或处理方案。

注意事项:

• @supports 规则只能检测 CSS 属性和值，不能用于检测 JavaScript 或其他非 CSS 的特性。
• 尽量避免过度依赖 @supports，过多的嵌套逻辑会使 CSS 代码难以维护。
• 可以通过结合浏览器前缀来检测一些实验性的 CSS 属性(尽管现在已经很少需要这样做)。例如 @supports ( -webkit-transform: rotate(30deg) ).
• @supports 不能用于判断一个 CSS 属性的“存在”，只能测试其是否支持特定的值，例如 display 属性总是会被支持，但是 display: grid 不一定。因此，@supports (display) 是无效的。