CSS @supports：特性查询与渐进增强

---

title: CSS @supports：特性查询与渐进增强

keywords:

• @supports
• 特性查询
• 渐进增强
• 回退策略
• 兼容矩阵

description: 使用 @supports 进行特性存在性查询，选择性启用新能力并提供回退，实现渐进增强与稳定兼容。

categories:

• 文章资讯
• 编程技术

---

概述

@supports 允许在满足条件时应用样式规则，用于新特性启用与回退。配合 not 与复合条件编写可维护的兼容策略。

用法/示例

@supports (container-type: inline-size) {
  .card { container-type: inline-size }
}

@supports not (height: 100dvh) {
  .screen { min-height: 100vh }
}

工程建议

• 将特性查询集中到组件或入口样式，避免分散造成维护困难。
• 为关键路径提供明确的回退规则并验证多设备表现。
• 定期更新兼容矩阵与策略，移除过时的回退以减少体积。

参考与验证

• MDN：@supports — https://developer.mozilla.org/docs/Web/CSS/@supports
• W3C：CSS Conditional Rules — https://www.w3.org/TR/css-conditional-3/