必须用@supports(--prop:value)或CSS.supports('--prop:value')检测CSS自定义属性支持，缺值、加括号、只传属性名均失效；二者均验证语法解析能力而非变量赋值状态，IE等旧浏览器需用临时元素+setPropertyValue+getComputedStyle兜底。
CSS 自定义属性（即 CSS 变量）支持检测，必须用 @supports (--prop: value) 或 CSS.supports('--prop: value')，不能省略值、不能加括号包裹单条件、不能只传属性名——这是绝大多数人翻车的第一步。
为什么 @supports (--theme-color) 总是不生效
浏览器解析 @supports 时，只认「完整声明对」，即 属性: 值 形式。自定义属性的支持判定不是看变量有没有被定义，而是看浏览器能否合法解析 --xxx: yyy 这种语法结构。
-
@supports (--theme-color)❌ 缺值，整个规则块被忽略（不是返回 false，是静默丢弃） -
@supports ( --theme-color: red )✅ 空格可选，但冒号和值必须存在 -
@supports ((--theme-color: red))⚠️ 多余括号在部分 Safari 中触发解析失败 - 值必须是浏览器能识别的合法语法：
red、1px、initial都行；var(--x)不行（那是使用，不是声明）
CSS.supports('--color: blue') 在 Safari 16.4–17.3 中返回 false 的原因
这个版本区间的 Safari 对 CSS.supports() 的双参数形式有严重 bug，但单参数字符串形式稳定可用。更关键的是：它根本不接受带括号的字符串，比如 '(--color: blue)' —— 这会被当成逻辑表达式解析，而单条件加括号不符合规范。
- ✅ 正确写法：
CSS.supports('--color: blue')（单参数，无括号，有值） - ❌ 错误写法：
CSS.supports('--color', 'blue')（双参数，在 Safari 16.4–17.3 恒 false） - ❌ 错误写法：
CSS.supports('(--color: blue)')（括号是给and/or/not用的，这里反而失效） - ⚠️ 兜底建议：使用前先判断
typeof CSS.supports === 'function'，IE 完全不支持该 API
检测自定义属性时，@supports 和 CSS.supports() 的根本区别
两者检测目标一致，但执行时机和上下文完全不同：前者是 CSS 解析器在加载样式表时同步判断，后者是 JS 运行时调用。这意味着它们面对“作用域”和“动态注入”的行为差异极大。
立即学习“前端免费学习笔记（深入）”；
-
@supports (--foo: 0)只在<style></style>或.css文件中有效，写在<script></script>里或 HTML 属性中直接被忽略 -
CSS.supports()可以在任何 JS 执行时机调用，但无法感知后续动态插入的样式表（例如通过document.styleSheets注入后才检测） - 两者都不检查变量是否“已赋值”或“在当前作用域可见”，只确认浏览器是否具备解析该声明语法的能力
- 若需验证变量实际是否生效（比如被覆盖、拼写错误、大小写不匹配），必须配合
getComputedStyle(el).getPropertyValue('--foo')运行时读取
IE 和老 Android Browser 的兼容性兜底怎么做
IE 完全不支持 @supports 和 CSS.supports()，老 Android Browser（4.3 及更早）连 getComputedStyle 都不稳定。此时只能退到最原始的“赋值 + 读取”法，但要注意几个硬坑：
- 创建临时元素：
const el = document.createElement('div') - 设置变量：
el.style.setProperty('--test', '1')（注意：不能用el.style['--test'] = '1'，IE8–10 不支持） - 读取验证：
getComputedStyle(el).getPropertyValue('--test') === '1'（注意返回值含空格，建议用.trim()） - 变量名区分大小写：
--Color和--color是两个不同变量，测试时必须严格一致 - 该方法在 IE9+ 可用，但 IE8 及更早版本连
setProperty都不支持，只能彻底降级为 class 控制
真正容易被忽略的点是：自定义属性支持 ≠ 变量可用。即使检测通过，如果变量写在未激活的选择器下、被更高优先级规则覆盖、或在 :root 外定义却在子元素中读取，依然拿不到值。检测只是第一道门，运行时验证才是最后一道防线。
