@supports 是增强通道而非降级开关，需将兼容样式写在外层，现代特性用 @supports 覆盖；语法敏感，括号空格、组合判断、浏览器支持范围均需严格校验。
@supports 不是降级开关，而是增强通道
很多人以为把 @supports 块写在前面就能“先检测再兜底”，结果 IE11 和旧 Safari 什么样式都看不到——因为它们根本不解析 @supports 语法，整条规则被直接跳过，连 fallback 都没机会执行。
真正有效的写法必须把兼容样式写在外层，@supports 只负责覆盖：
-
.card { display: flex; }→ 这行必须在@supports外面，IE11、Safari ≤16.3 都能读到 -
@supports (display: grid) and (gap: 1rem) { .card { display: grid; gap: 1rem; } }→ 现代浏览器才进这个块 - 千万别用
.card { display: grid; }单独塞进@supports里，否则老浏览器布局全崩
检测写法稍错，整块规则就被静默丢弃
@supports 对语法极其敏感，一个空格、一个非法值，整块 CSS 就失效，且不报错、不警告、不降级——浏览器直接跳过。
常见失效写法：
立即学习“前端免费学习笔记（深入）”；
-
@supports(display: grid)❌ 缺括号前/后空格，必须写成@supports (display: grid)✅ -
@supports (gap: 1rem)❌ 单独检测无意义；gap依赖容器是grid或flex，应组合判断：@supports (display: grid) and (gap: 1rem)✅ -
@supports (inset: 0)❌ Safari 15.4 之前完全不识别，整块静默跳过 -
@supports (color: var(--c))❌ 不可靠；变量能力检测应交给 JS：window.CSS.supports('color', 'var(--c)')✅
别把所有特性塞进一个 CSS 文件
@supports 不是加载器，它只决定某段样式是否生效，不会触发网络请求。想按能力分层交付，得物理拆分 CSS 文件，并用 <link rel="stylesheet" media=""> 控制加载时机。
典型分层策略：
- 基础层：
base.css——float+inline-block+max-width，IE9+ 可运行 - Flex 层：
flex-enhance.css—— 用@supports (display: flex)调整对齐/顺序，不改 DOM - Grid 层：
grid-enhance.css——@supports (display: grid) and (gap: 1rem)启用网格+间距，避开旧 Safari 只支持grid不支持gap的坑 - 容器查询层：
container-enhance.css——@supports (container-type: inline-size)包裹，fallback 到@media
构建工具（如 PostCSS）压缩时若删掉括号空格，也会破坏语法，需确认配置保留格式。
@supports 块内禁止干这些事
它不是 JS，也不是 HTML 操作器，能力边界非常明确：
- 禁止
@import：写@supports (...) { @import "xxx.css"; }会被忽略 - 禁止写 HTML 相关选择器：
link[rel="stylesheet"] { }这类规则在@supports块里无效 - 禁止嵌套另一层
@supports：可读性差，维护成本高，没必要 - 避免和
@media混写在同一选择器下；如需组合，固定顺序：@supports在外，@media在内
最易被忽略的点：所谓“裸跑可用”不是加分项——删掉所有 CSS 和 JS 后，页面仍要能读出语义、表单可提交、导航可键盘操作。这是 @supports 发挥作用的前提，不是它能解决的问题。
