@supports 特性查询

@supports 是“CSS 的 if 语句”：只在该属性被支持时应用规则。配合 CSS.supports()（JS 版）可以做运行时分支，比判断 userAgent 可靠得多。

典型用法：新布局做主力、旧浏览器回退到 float/flex 写法，两套规则都写在 CSS 里，互不干扰。

@supports (display: grid) { … }：支持才启用
@supports not (…)：不支持时回退
JS 版 CSS.supports() 可做逻辑组合与功能开关

CSS

/* 默认：稳妥的 flex 方案 */
.cards { display: flex; flex-wrap: wrap; }
.cards .card { width: 30%; }

/* 支持 grid 才升级 */
@supports (display: grid) {
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .cards .card { width: auto; }
}

/* 不支持 aspect-ratio 的浏览器用 padding-top 老办法 */
@supports not (aspect-ratio: 16/9) {
  .video { position: relative; padding-top: 56.25%; }
  .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
}

本节要点@supports 让“渐进增强”落地：新特性做增强、旧特性做兜底，自动切换。

🔗 相关词条CSS3 CSS 网格布局

📚 推荐阅读

来自万象云档的免费在线书籍，点击封面直接阅读