@supports必须写在CSS上下文中才有效，不能塞进HTML标签或script里；检测单个属性时括号内须为完整合法的“属性: 值”对，否则整块规则会被浏览器静默丢弃。
@supports 必须写在 CSS 上下文中才有效，不能塞进 HTML 标签、<script> 或 <link> 里；检测单个属性时，括号内必须是完整且合法的「属性: 值」对，否则整块规则会被浏览器静默丢弃。</script>
为什么 @supports (display: grid) 写对了却没生效
常见失效不是因为浏览器不支持 display: grid，而是语法细节出错，导致解析器直接跳过整个 @supports 块：
-
@supports(display: grid)缺少关键字和括号之间的空格 → Safari ≤15.6、Firefox ≤102 拒绝识别 -
@supports (display: "grid")值加了引号 → 所有浏览器判为非法声明，整块丢弃 -
@supports (aspect-ratio: auto)值虽语法合法，但 Safari 15.4 之前不支持该属性 → 条件返回 false，样式不应用 - 混用前缀：
@supports (-webkit-backdrop-filter: blur(1px))大部分现代浏览器已不认 → 应改用标准名backdrop-filter
@supports selector(:has()) 在 Safari 中为什么总不触发
selector() 函数本身有明确的版本断层，不是“写了就能用”：
- Safari ≤16.3 完全忽略
@supports selector(...)整条规则（不是返回 false，是压根不解析） - Safari 16.4+ 才开始识别
selector(:has(*))，但复杂嵌套如:has(+ div, ~ p)仍可能失败 -
@supports selector(:has())单独写会失效，必须用最简安全形式兜底：@supports selector(:has(*)) - 即使
@supports selector(article:has(> h2))返回 true，Safari 对:has()的解析深度仍弱于 Chrome，关键布局务必保留.has-has类驱动的 JS 降级
CSS.supports() 在 JS 中检测属性支持的坑
CSS.supports() 不是 @supports 的 JS 翻版，参数格式稍错就永远返回 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 不存在
检测 CSS 自定义属性（变量）真正该测什么
自定义属性（--color）本身不能被 @supports 直接检测，因为 --xxx 不是标准属性 —— 你真正要测的是 var() 函数能否被解析：
- ❌ 错误：
@supports (--primary: blue)→ 语法非法，整块被丢弃 - ✅ 正确：
@supports (color: var(--x))→ 测试浏览器能否识别var()在标准属性值中的使用 - JS 中对应写法：
CSS.supports('color: var(--x)')，不是CSS.supports('--x: red') - 注意：
@supports (color: var(--x, #000))带 fallback 的写法在旧安卓 WebView 中可能解析失败，应避免
最容易被忽略的不是“怎么写”，而是“什么时候不该信它”：@supports 只判断语法是否可被当前上下文合法接受，不保证实际渲染有效。比如 color-scheme: dark 写在普通选择器里会判为不支持，只允许出现在 :root；::marker { content: "•" } 即使 @supports (content: "•") 返回 true，Safari 也不渲染 —— 因为 content 在 ::marker 中本就不受支持。
