@supports语法错误会导致整块样式被浏览器静默忽略，而非部分失效或报错；常见错误包括括号与关键字间缺空格、值加引号、检测非法属性或模板语法、误用前缀及自定义属性等。
@supports语法写错导致整块被静默丢弃
浏览器遇到无法解析的@supports条件，不是报错或部分生效，而是直接跳过整个规则块——包括花括号里所有样式。这不是“没效果”，是彻底不读。
-
@supports(display: grid)缺少关键字和括号之间的空格 → Safari ≤15.6、Firefox ≤102 直接忽略整条规则 -
@supports (display: "grid")值加了引号 → 所有浏览器判为非法声明，整块丢弃 -
@supports (inset: 0)在 Safari 15.4 之前不识别 → 条件返回false，样式不应用，但你可能误以为是逻辑写错了 -
@supports (-webkit-backdrop-filter: blur(1px))现代浏览器已废弃前缀检测 → 应改用标准名backdrop-filter
@supports检测对象本身就不支持
它只认标准属性名 + 合法值构成的「声明对」，对自定义属性、函数调用、计算值完全无感。你以为在测变量，其实它根本没看。
-
@supports (--color: red)❌ 无效 ——--color不是标准属性，@supports不处理自定义属性 -
@supports (color: var(--c))❌ 是值计算，不是特性检测 —— 应改用@supports (color: #000)或配合 JS 验证var()解析能力 -
@supports (grid-template-areas: "a b")❌ 语法非法 —— 模板字符串不可检测，只能代理为@supports (display: grid) -
@supports selector(:has(+ div))❌ Safari 16.4+ 才支持最简形式:has(*)，复杂嵌套仍可能不触发
浏览器报告支持 ≠ 渲染可用
这是最容易让人困惑的点：@supports 只问“浏览器声不声称支持”，不验证实际渲染是否正确。旧版 Safari 声称支持 display: grid，却漏掉 grid-template-areas；Chrome Canary 提前暴露 inset 解析，导致检测通过但运行时报错。
-
@supports (display: grid)返回true，但subgrid仍不可用 → 必须单独测@supports (grid-template-columns: subgrid) -
@supports (gap: 1rem)在 IE 和旧 Android WebView 中返回false，但在某些安卓机型上返回true却渲染异常 → 此时需 JS 主动写入 +getComputedStyle读回验证 -
@supports (scroll-timeline: --x)对@scroll-timeline规则无意义 —— 它不检测 at-rule，只认声明对
JS中CSS.supports()参数格式极易出错
这个 API 看似和 CSS 层面一致，但参数稍错就永远返回 false，且不同浏览器容错差异大。
- ✅ 正确：
CSS.supports('display: flex')（单字符串，完整声明） - ❌ 错误：
CSS.supports('display', 'flex')（双参数）→ Safari 16.4–17.3 中恒返回false - ❌ 错误：
CSS.supports('(display: grid) and (gap: 1rem)')→ 括号不匹配或空格缺失，Chrome 判为非法 - ⚠️ 必须前置判断：
typeof CSS.supports === 'function'，IE 和 Android 4.3 WebView 中该 API 不存在
@supports返回的true，却没验证它背后那个属性在当前浏览器里是否真能画出来。比如inset在 Chrome 115+ 才稳定，但 114 Canary 就开始解析语法——检测过了，一用就崩。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
