@supports 能用但容错率极低，语法错误会导致整条规则被静默丢弃；正确写法需括号紧贴条件、值合法无引号、避免废弃前缀和复杂选择器；CSS.supports() 与 @supports 执行时机不同，检测自定义属性应测 color: var(--x) 而非 --x 是否存在。
直接结论：@supports 能用，但写错就等于没写——它不报错、不警告，而是静默丢弃整块样式。
@supports (display: grid) 为什么总不生效
这不是浏览器不支持，而是解析器根本没认出你写的条件。@supports 不是 JS 的 if，它在 CSS 加载时同步解析，语法错一点，整条规则就被跳过。
-
@supports (display: grid)✅ 正确：括号紧贴条件，空格规范，值合法 -
@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: blur(1px)
@supports selector(:has()) 在 Safari 中失效
Safari 对 selector() 的支持有明确断层：≤16.3 版本完全不解析整条 @supports selector(...) 规则——不是返回 false，是压根不读。
-
@supports selector(:has(*))✅ 最简安全形式，Safari 16.4+ 开始识别 -
@supports selector(:has(> h2))⚠️ 复杂嵌套在 Safari 中仍可能失败，解析深度弱于 Chrome -
@supports selector(article:has(> h2))❌ 即使返回 true，也不能保证布局可靠，必须保留.has-has类 + JS 降级
CSS.supports() 和 @supports 的根本区别
两者目标一致，但执行时机和上下文完全不同：一个在 CSS 解析时跑，一个在 JS 运行时调用。这导致它们对“动态注入”“作用域”“兜底行为”的处理完全不一样。
小红书长文-谷歌浏览器
下载
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
立即学习“前端免费学习笔记（深入）”；
-
@supports (--color: red)写在<script>里或 HTML 属性中 → 直接被忽略（只在<style>或 .css 文件中有效） -
CSS.supports('--color: red')✅ 可在任意 JS 时机调用，但无法感知后续通过document.styleSheets动态插入的样式表 -
CSS.supports('(--color: red)')❌ 括号是给and/or/not用的，单条件加括号反而失效（Chrome 120+、Safari 17.4 已确认） -
typeof CSS.supports === 'function'⚠️ 必须前置判断，IE 和 Android 4.3 WebView 中该 API 不存在
检测 CSS 自定义属性真正该测什么
别测 --theme-color 是否“存在”，要测 color: var(--x) 是否能被解析——因为变量声明本身不是可检测特性，使用能力才是。
-
@supports (color: var(--x))✅ 最可靠写法，覆盖 Chrome 49+、Firefox 31+、Safari 9.1+、Edge 16+ -
@supports (--theme-color: red)❌ 语法无效，整条规则被静默丢弃（不是返回 false） -
@supports (color: var(--x, #000))⚠️ 带 fallback 的写法在部分旧引擎中解析失败，避免使用 -
CSS.supports('color: var(--x)')✅ 推荐单参数形式；CSS.supports('color', 'var(--x)')❌ Safari 16.4–17.3 恒返回 false
真正容易被忽略的，是 @supports 对“声明有效性”的判断粒度极细——它不关心你写了什么前缀、开了什么 flag，只看你写的那一行 CSS 是否能被当前渲染引擎无错误地消化。写错一个空格，就等于没写。
