CSS Feature Queries（特性查询）：`@supports`的逻辑操作符与降级策略 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

CSS Feature Queries：`@supports`的逻辑操作符与降级策略

大家好，今天我们来深入探讨CSS中的Feature Queries，也就是@supports规则。@supports允许我们检测浏览器是否支持特定的CSS特性，并根据检测结果应用相应的样式。这对于构建健壮、可维护且优雅降级的Web应用至关重要。我们将着重关注@supports的逻辑操作符以及如何利用它们来设计有效的降级策略。

1. `@supports`的基本语法与功能

@supports规则的基本语法如下：

@supports (condition) {
  /* 如果 condition 为真，则应用这里的样式 */
}

condition部分是一个CSS声明块，浏览器会评估这个声明块是否有效。如果浏览器支持声明块中的所有特性，condition就被认为是真，花括号内的样式规则就会被应用。

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

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

如果浏览器支持Grid布局，.container就会应用Grid布局的样式。如果不支持，则不会应用这些样式，页面会使用其他方式进行布局（稍后我们会讨论降级策略）。

更复杂一些，我们可以检测是否支持自定义属性（CSS Variables）：

@supports (--custom-property: value) {
  :root {
    --primary-color: blue;
  }

  body {
    background-color: var(--primary-color);
  }
}

如果浏览器支持CSS变量，我们定义并使用--primary-color，否则var(--primary-color)会降级为初始值，或者如果设置了备用值，则会使用备用值。

2. `@supports`的逻辑操作符：`and`, `or`, `not`

@supports规则提供了三个逻辑操作符：and、or和not，允许我们构建更复杂的条件。

and: 只有当所有条件都为真时，整个条件才为真。
```
@supports (display: grid) and (backdrop-filter: blur(5px)) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    backdrop-filter: blur(5px);
  }
}
```
这个例子中，只有当浏览器既支持Grid布局又支持backdrop-filter时，才会应用相应的样式。
or: 只要其中一个条件为真，整个条件就为真。
```
@supports (display: flex) or (display: -webkit-flex) {
  .container {
    display: flex; /* 标准语法 */
  }
}
```
这个例子中，如果浏览器支持标准的Flexbox语法display: flex或带有webkit前缀的Flexbox语法display: -webkit-flex，就会应用Flexbox布局。这对于兼容一些旧版本的浏览器非常有用。
not: 用于否定一个条件。
```
@supports not (display: grid) {
  .container {
    float: left; /* 使用浮动布局作为降级方案 */
    width: 33.33%;
  }
}
```
这个例子中，如果浏览器不支持Grid布局，则会使用浮动布局作为降级方案。

3. 逻辑操作符的组合使用

我们可以将and、or和not操作符组合起来，构建更加复杂的条件。为了避免歧义，建议使用括号明确优先级。

例如，我们要检测浏览器是否支持Grid布局，并且不支持backdrop-filter或者不支持clip-path：

@supports (display: grid) and (not (backdrop-filter: blur(5px)) or not (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%))) {
  .container {
    display: grid;
    /*  Grid布局的样式，但需要针对不支持backdrop-filter或clip-path的情况进行额外处理 */
  }
}

这个例子展示了如何使用逻辑操作符来处理复杂的浏览器支持情况。只有当支持 Grid 布局，且不支持 backdrop-filter 或者不支持 clip-path 时，才会应用相应的样式。

4. 降级策略：从现代特性到传统方案

@supports规则最强大的应用在于实现优雅的降级策略。降级策略是指，当浏览器不支持某个现代CSS特性时，提供一个备用的、基于传统技术的方案，以保证页面在所有浏览器上都能正常显示。

通常，降级策略遵循以下原则：

先提供基础方案: 在@supports规则之外，先提供一个基于传统CSS技术（例如浮动、定位等）的基础方案。
使用@supports检测高级特性: 使用@supports规则检测浏览器是否支持高级特性。
应用高级特性样式: 如果支持高级特性，则应用相应的样式，覆盖基础方案。

以下是一个示例，展示如何使用Grid布局，并降级到浮动布局：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

/* 基础方案：使用浮动布局 */
.container {
  width: 100%;
  overflow: hidden; /* 清除浮动 */
}

.item {
  float: left;
  width: 33.33%;
  box-sizing: border-box;
  padding: 10px;
}

/* 高级方案：使用Grid布局 */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    overflow: visible; /* 覆盖清除浮动 */
  }

  .item {
    float: none; /* 移除浮动 */
    width: auto;   /* 移除宽度 */
  }
}

在这个例子中，所有浏览器都会先应用浮动布局。如果浏览器支持Grid布局，@supports规则内的样式会覆盖浮动布局的样式，从而使用Grid布局。

特性	不支持 Grid 布局时	支持 Grid 布局时
`.container`	`float: left; width: 33.33%;`	`display: grid; grid-template-columns: repeat(3, 1fr);`
`.item`	`overflow: hidden;`	`overflow: visible;`

再看一个使用Flexbox布局降级到内联块布局的例子：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

/* 基础方案：使用内联块布局 */
.container {
  font-size: 0; /* 移除内联块之间的空格 */
}

.item {
  display: inline-block;
  width: 33.33%;
  box-sizing: border-box;
  padding: 10px;
  font-size: 16px; /* 恢复字体大小 */
  vertical-align: top;
}

/* 高级方案：使用Flexbox布局 */
@supports (display: flex) {
  .container {
    display: flex;
    justify-content: space-between;
  }

  .item {
    width: auto;
  }
}

在这个例子中，所有浏览器都会先应用内联块布局。如果浏览器支持Flexbox布局，@supports规则内的样式会覆盖内联块布局的样式，从而使用Flexbox布局。

5. 使用`@supports`处理前缀

在一些老版本的浏览器中，一些CSS特性可能需要带有浏览器前缀才能生效。@supports可以帮助我们处理这种情况。

例如，要同时支持旧版本的Firefox和现代浏览器中的transform属性：

@supports (transform: rotate(45deg)) or (-moz-transform: rotate(45deg)) {
  .element {
    transform: rotate(45deg); /* 标准语法 */
    -moz-transform: rotate(45deg); /* Firefox前缀 */
  }
}

在这个例子中，如果浏览器支持标准的transform属性或者带有-moz-前缀的transform属性，就会应用相应的样式。虽然现在已经很少需要这样做，但在维护老项目时可能会遇到。

更推荐的做法是使用PostCSS之类的工具自动添加浏览器前缀，而不是手动编写大量的带有前缀的CSS代码。

6. `@supports`与JavaScript的结合

虽然@supports主要用于CSS中，但我们也可以在JavaScript中使用CSS.supports()方法来检测CSS特性是否被支持。

if (CSS.supports('display', 'grid')) {
  console.log('浏览器支持Grid布局');
} else {
  console.log('浏览器不支持Grid布局');
}

CSS.supports()方法接受两个参数：属性名和属性值。它返回一个布尔值，表示浏览器是否支持指定的CSS特性。

我们还可以使用逻辑操作符构建更复杂的条件：

if (CSS.supports('display: grid') && !CSS.supports('backdrop-filter', 'blur(5px)')) {
  console.log('浏览器支持Grid布局，但不支持backdrop-filter');
}

在 JavaScript 中使用特性查询，可以动态地根据浏览器的支持情况加载不同的 JavaScript 模块或者执行不同的代码逻辑，进一步增强了渐进增强的能力。

7. `@supports`的注意事项

性能: @supports规则的评估是在浏览器渲染页面时进行的，因此过度使用复杂的@supports规则可能会影响页面的性能。尽量保持条件简洁，避免不必要的计算。
可读性: 复杂的@supports规则会降低代码的可读性。为了提高可读性，可以使用注释来解释条件的含义，或者将复杂的条件拆分成多个简单的条件。
测试: 在使用@supports规则时，务必在不同的浏览器和设备上进行测试，以确保降级策略能够正常工作。可以使用BrowserStack之类的工具进行跨浏览器测试。
维护: 随着浏览器技术的不断发展，一些老的@supports规则可能会变得过时。定期检查和更新@supports规则，以确保代码的兼容性和可维护性。

8. 示例：使用`@supports`实现响应式图片加载

我们可以结合@supports和<picture>元素，实现更加智能的响应式图片加载。例如，我们可以检测浏览器是否支持image-set() CSS函数，如果支持，则使用image-set()来提供不同分辨率的图片，否则使用传统的<source>元素。

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(max-width: 1200px)" srcset="medium.jpg">
  <img src="large.jpg" alt="A responsive image">
</picture>

@supports (image-set: url(img.png) 1x, url(img-2x.png) 2x) {
  picture > img {
    content: image-set(
      url("small.jpg") 1x,
      url("small-2x.jpg") 2x
    );
  }

  @media (min-width: 601px) and (max-width: 1200px) {
    picture > img {
      content: image-set(
        url("medium.jpg") 1x,
        url("medium-2x.jpg") 2x
      );
    }
  }

  @media (min-width: 1201px) {
    picture > img {
      content: image-set(
        url("large.jpg") 1x,
        url("large-2x.jpg") 2x
      );
    }
  }

  picture > source, picture > img[srcset] {
    display: none; /* 隐藏 <source> 元素，防止重复加载 */
  }
}

在这个例子中，如果浏览器支持image-set()，则会使用image-set()来加载不同分辨率的图片，并隐藏<source>元素。否则，会使用<source>元素来加载图片。这可以提高图片加载的性能和用户体验。

9. 示例：检测`accent-color`属性

accent-color 属性允许我们自定义表单控件的强调色。我们可以使用@supports来检测浏览器是否支持该属性，并提供备用样式。

@supports (accent-color: red) {
  input[type="checkbox"] {
    accent-color: red;
  }
}

/* 不支持 accent-color 时，使用备用样式 */
input[type="checkbox"] {
  /*  自定义复选框的样式，例如使用背景图片 */
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
}

input[type="checkbox"]:checked {
  background-color: red;
  border-color: red;
}

这段代码会先检测浏览器是否支持 accent-color。如果支持，就直接使用该属性来设置复选框的强调色。如果不支持，则使用 CSS 自定义复选框的样式，模拟强调色的效果。

优雅降级，提升用户体验

总而言之，@supports规则是CSS中一个非常强大的特性，它允许我们检测浏览器对CSS特性的支持情况，并根据检测结果应用不同的样式。通过合理地使用@supports规则和逻辑操作符，我们可以构建健壮、可维护且优雅降级的Web应用，为用户提供最佳的体验。

更多IT精英技术系列讲座，到智猿学院

CSS Feature Queries：@supports的逻辑操作符与降级策略

1. @supports的基本语法与功能

2. @supports的逻辑操作符：and, or, not

3. 逻辑操作符的组合使用

4. 降级策略：从现代特性到传统方案

5. 使用@supports处理前缀

6. @supports与JavaScript的结合

7. @supports的注意事项

8. 示例：使用@supports实现响应式图片加载

9. 示例：检测accent-color属性