CSS.supports()返回false的常见原因是参数格式错误，正确写法为CSS.supports('display', 'grid')而非CSS.supports('display: grid')；实验性特性如color-mix()需启用flag才被识别；JS检测与@supports执行时机不同，不保证结果一致。
为什么 CSS.supports() 返回 false 但浏览器明明支持该特性
常见错误是传参格式不对：CSS.supports() 接收两个参数（属性名、属性值），不是单个字符串。写成 CSS.supports('display: grid') 会直接返回 false，正确写法是 CSS.supports('display', 'grid')。另外，某些实验性特性（如 color-mix()）需在 Chrome 中启用 flag 才能被识别，此时 JS 检测也会失败，不能简单归因为代码写错。
@supports 里用 and/or 组合条件时为何不生效
语法容错极低，空格、换行、括号嵌套都可能让整条规则失效。例如：@supports (display: grid) and (gap: 1rem) 看似合理，但 gap 单独检测无意义——它必须依附于 display: grid 或 display: flex 上下文。更稳妥的写法是：@supports (display: grid) and (grid-template-columns: 1fr)，或拆成两个独立 @supports 块。旧版 Safari（≤12.1）对 and/or 复合条件解析不稳定，建议优先用单条件检测 + class 切换兜底。
JS 检测结果和 @supports 样式块行为不一致怎么办
根本区别在于执行时机：@supports 是 CSS 解析阶段静态判断，CSS.supports() 是运行时 JS 查询。两者不保证同步。典型坑点包括：
- 动态插入
@supports规则（如用insertRule()）多数浏览器会忽略 - SSR 场景下服务端无法调用
CSS.supports()，导致首屏水合 mismatch - 不要用 JS 检测结果去 toggle
@supports块，改用 class 控制：document.body.classList.toggle('supports-grid', CSS.supports('display', 'grid'))，再写.supports-grid .container { display: grid; }
哪些特性值得用 CSS.supports() 配合降级逻辑
优先选「有成熟 fallback 方案 + 支持断层明显」的属性，避免为边缘特性增加维护成本：
立即学习“前端免费学习笔记（深入）”；
-
display: grid：IE 完全不支持，iOS Safari 10.3+ 才支持，可 fallback 到flexbox或float -
aspect-ratio：Chrome 88+/Firefox 89+ 支持，此前靠padding-top技巧，检测后可简化结构 -
backdrop-filter：检测时务必搭配not(filter: blur())，避免在仅支持filter的旧浏览器中误触发 - 避开单独检测
gap、place-items等依赖上下文的属性——它们脱离容器显示模式就无意义
真正难处理的不是检测逻辑本身，而是降级样式是否能在所有目标浏览器中“干净退出”：比如 IE11 会直接跳过整个 @supports 块，所以外部样式必须用它能理解的语法（float、inline-block），且不能含任何现代函数或单位。
