@supports：优雅地进行特性检测与渐进增强

哈希茶馆
97 阅读6分钟

哈喽，各位技术伙伴们，欢迎来到【哈希茶馆】！在日常的前端开发中，我们经常会遇到一个头疼的问题：不同浏览器对 CSS 特性的支持程度不一。为了让我们的网页在各种环境下都能优雅展示，同时又能充分利用现代 CSS 的强大功能，“特性检测”就显得尤为重要。今天，我们就来聊聊 CSS 中一个专门为此而生的利器——@supports规则，看看它如何帮助我们实现渐进增强，打造更棒的用户体验。

什么是 @supports？

简单来说，@supports 是 CSS 的一个条件规则，它允许我们检查浏览器是否支持某个特定的 CSS 属性-值对。如果支持，那么 @supports 代码块内部的样式就会生效；如果不支持，则会被浏览器忽略。这就像给我们的 CSS 代码装上了一个“侦察兵”，先探路再决定后续的“作战”方案。

它的基本语法非常直观：

@supports (特性声明) {
  /* 当浏览器支持该特性声明时，这里的样式会生效 */
}

例如，我们想检查浏览器是否支持 display: grid：

.container {
  /* 默认样式 */
  display: block; 
}

@supports (display: grid) {
  .container {
    /* 如果支持 grid，则应用 grid 布局 */
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

在这个例子中，如果浏览器支持 display: grid，.container 元素就会采用网格布局。如果不支持，它会优雅地降级，保持 display: block 的默认样式。

为什么要用 @supports？

你可能会想，以前我们不也用 JavaScript 或者 Modernizr 这样的库来做特性检测吗？@supports 有什么特别的优势呢？

  1. CSS 原生，无需脚本：对于很多纯样式的特性检测，@supports 完全在 CSS 层面解决，减少了对 JavaScript 的依赖，也意味着更快的解析和渲染。
  2. 代码更清晰：将特性相关的样式直接写在 @supports 规则内，代码的意图更加明确，维护起来也更方便。
  3. 渐进增强的利器：我们可以先为所有浏览器提供一个基础的、可用的样式版本，然后通过 @supports 为支持新特性的浏览器提供更丰富、更现代的体验。

@supports 的进阶用法

@supports 不仅仅能做简单的特性检查，它还支持逻辑操作符，让我们的判断条件更加灵活。

1. not 操作符

not 操作符用于判断浏览器不支持某个特性声明的情况。

.card {
  background-color: #eee; /* 默认背景 */
}

/* 如果浏览器不支持 CSS 变量 */
@supports not (--custom-property: true) {
  .card {
    /* 提供一个备用背景色方案 */
    background-color: lightgray; 
    border: 1px solid #ccc;
  }
}

这里，如果浏览器不支持 CSS 自定义属性 (CSS Variables)，.card 就会应用备用的背景色和边框。

2. and 操作符

and 操作符用于判断浏览器是否同时支持多个特性声明。

@supports (display: flex) and (gap: 10px) {
  .flex-container {
    display: flex;
    gap: 10px; /* 只有同时支持 flex 和 gap 才应用 */
  }
}

在这个例子中，只有当浏览器同时支持 display: flex 和 gap 属性时，.flex-container 的样式才会生效。这对于确保一组相关特性协同工作非常有用。

3. or 操作符

or 操作符用于判断浏览器是否支持多个特性声明中的至少一个。

/* 检查是否支持标准的或带前缀的 transform 属性 */
@supports (transform: translateX(10px)) or (-webkit-transform: translateX(10px)) {
  .animated-element {
    /* 应用动画效果 */
    transition: transform 0.3s ease;
  }
  .animated-element:hover {
    transform: translateX(10px);
    -webkit-transform: translateX(10px); /* 确保兼容性 */
  }
}

虽然现在很多 CSS 属性已经不需要厂商前缀了，但 or 操作符在处理一些仍需兼容旧版本浏览器或特定实现的场景时依然有其价值。

@supports 的实战场景

理论讲了不少，我们来看几个 @supports 在实际开发中的应用场景。

场景一：优雅的网格布局

网格布局（Grid）非常强大，但仍有少量老旧浏览器不支持。我们可以这样处理：

.item-list {
  /* 默认使用 Flexbox 作为回退方案 */
  display: flex;
  flex-wrap: wrap;
}

.item-list > .item {
  flex: 1 1 200px; /* Flexbox 子项样式 */
  margin: 5px;
}

@supports (display: grid) {
  .item-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
  }
  .item-list > .item {
    /* 清除 Flexbox 可能引入的样式 */
    flex: auto; 
    margin: 0;
  }
}

这样，支持 Grid 的浏览器会获得更优的网格布局体验，而不支持的浏览器则会平稳地回退到 Flexbox 布局。

场景二：现代视觉效果的增强

假设我们想使用 aspect-ratio 属性来保持元素的宽高比，但这个属性比较新。

.image-placeholder {
  width: 100%;
  background-color: #f0f0f0;
  /* 传统的回退方案，比如使用 padding-top hack */
  height: 0;
  padding-top: 56.25%; /* 16:9 比例 */
  position: relative;
}

.image-placeholder img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@supports (aspect-ratio: 16 / 9) {
  .image-placeholder {
    aspect-ratio: 16 / 9;
    /* 如果支持 aspect-ratio，就不再需要 padding-top hack 和相对定位了 */
    height: auto;
    padding-top: 0;
    position: static; /* 或者根据实际情况调整 */
  }
  .image-placeholder img {
    position: static; /* 对应调整 */
  }
}

通过 @supports，我们可以为支持 aspect-ratio 的浏览器提供更简洁、更现代的实现方式，同时保证旧浏览器的兼容性。

@supports 与渐进增强

@supports 完美体现了“渐进增强”（Progressive Enhancement）的核心思想。我们首先构建一个在所有浏览器上都能良好运行的基础版本，然后针对那些支持更高级功能的浏览器，逐步添加额外的样式和功能，以提升用户体验。@supports 让我们能够优雅地实现这种增强，而不会因为新特性导致旧浏览器页面崩溃。

@supports 本身的浏览器兼容性

你可能会担心 @supports 本身的兼容性问题。好消息是，@supports 规则本身已经得到了所有现代主流浏览器的良好支持（包括 Chrome, Firefox, Safari, Edge, Opera 等）。这意味着你可以放心地在项目中使用它。当然，对于非常古老的浏览器（比如 IE），它会被直接忽略，其中的样式也不会生效，这符合我们渐进增强的预期。

小结

CSS @supports 规则为我们提供了一种强大且优雅的方式，在 CSS 层面直接进行特性检测。它使得实现渐进增强变得更加简单和直观，帮助我们构建出既能在老旧浏览器中稳定运行，又能在现代浏览器中大放异彩的网页应用。下次当你遇到需要根据 CSS 特性支持情况来应用不同样式时，不妨试试 @supports 吧！

如果你觉得这篇文章对你有帮助，欢迎点赞、推荐和分享给更多的小伙伴！我们下期再见！

🔥 关注我的公众号「哈希茶馆」一起交流更多开发技巧

avatar
文章
阅读
粉丝