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

概述

@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/