说下@supports有什么用途？

@supports 是 CSS 中的一个功能查询规则，它允许你编写条件性的 CSS 代码，这些代码只在浏览器支持特定的 CSS 特性时才会被应用。这使得开发者能够利用最新的 CSS 特性，同时确保在不支持这些特性的浏览器中仍然提供合理的样式。

@supports 的主要用途包括：

1. 渐进增强：你可以使用 @supports 来为支持特定 CSS 特性的浏览器提供增强的样式。例如，如果浏览器支持 CSS Grid，你可以使用 @supports 来应用一个更复杂的布局。
2. 特性检测：通过 @supports，你可以检测浏览器是否支持某个特定的 CSS 特性，然后根据检测结果应用不同的样式。这有助于确保你的网站或应用在所有浏览器中都能一致地显示。
3. 未来兼容性：随着 CSS 的不断发展，新的特性会不断被引入。使用 @supports 可以确保你的代码能够平滑地过渡到这些新特性，而无需担心破坏在不支持这些新特性的浏览器中的显示。

@supports 的基本语法如下：

@supports (property: value) {
  /* 支持该特性时应用的样式 */
}

@supports not (property: value) {
  /* 不支持该特性时应用的样式 */
}

例如，如果你想检测浏览器是否支持 grid-template-columns 属性，并据此应用不同的样式，你可以这样写：

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

@supports not (grid-template-columns: 1fr 1fr) {
  .container {
    display: flex;
    flex-direction: row;
  }
}

在这个例子中，如果浏览器支持 grid-template-columns，则 .container 会被应用一个网格布局。如果不支持，则会应用一个弹性盒布局作为备选方案。