使用@supports检测现代CSS特性的浏览器支持度

@supports：CSS 的“预言家”，让你的代码更优雅地拥抱未来

各位前端的弄潮儿们，你们有没有过这样的经历：满怀激情地用上了 CSS 的新特性，结果在某个古老的浏览器上，页面直接“崩盘”，之前的心血瞬间化为乌有？ 或者，为了兼容各种浏览器，写了一堆 Hack 代码，不仅丑陋不堪，还难以维护？

别慌！今天，我们要聊的就是 CSS 世界里的“预言家”—— @supports，它能帮你优雅地解决这些难题，让你的代码在拥抱未来的同时，还能照顾到那些“老朋友”。

什么是 @supports？ 简单点说，它就是 CSS 的“条件判断”。

就像 JavaScript 的 if...else 语句一样，@supports 可以让你检测浏览器是否支持某个 CSS 特性，然后根据结果决定是否应用特定的样式。有了它，你就可以放心地使用现代 CSS 特性，而不用担心老旧浏览器“掉链子”。

先来个简单的例子：

假设你想使用 display: grid 布局，但又担心有些浏览器不支持。你可以这样写：

.container {
  display: flex; /* 默认使用 flex 布局 */
}

@supports (display: grid) {
  .container {
    display: grid; /* 如果支持 grid 布局，则覆盖 flex 布局 */
    grid-template-columns: repeat