@supports (color: var(--x)) 是唯一可靠写法，因CSS规范不认可--xxx为合法属性名，必须用var()函数验证变量解析能力，且JS中CSS.supports()需严格按单参数形式调用。
@supports (color: var(--x)) 是唯一可靠写法
直接写 @supports (--theme-color: red) 会静默失效，所有浏览器都跳过整条规则。CSS 规范不认为 --xxx 是合法属性名，它只接受标准属性 + 值的组合。
真正要测的是「变量能否被 var() 函数解析并代入」，不是「能不能声明变量」。所以必须用带 var() 的完整声明作为条件：
-
@supports (color: var(--x))✅ 兼容 Chrome 49+、Firefox 31+、Safari 9.1+、Edge 16+ - 值部分写
--x就够了，不用存在、不用有默认值；写--missing-var也行 - 别加 fallback：
@supports (color: var(--x, #000))❌ 部分旧 Safari/Android WebView 解析失败 - IE 完全不识别
@supports，天然 fallback，不用额外处理
CSS.supports() 在 JS 中怎么写才不翻车
CSS.supports() 不是 CSS 里 @supports 的简单移植。它严格按 CSSOM 规范解析输入，括号、空格、值缺一不可。
常见错误包括传单属性名、加多余括号、用双参数在 Safari 16.4–17.3 中失效：
立即学习“前端免费学习笔记（深入）”；
-
CSS.supports('color: var(--x)')✅ 单参数形式，最稳，所有现代浏览器支持 -
CSS.supports('--theme-color: red')❌ 返回false，语义错误：这不是标准属性声明 -
CSS.supports('(color: var(--x))')❌ Safari 16.4–17.3 返回false，括号只用于逻辑表达式 -
CSS.supports('color', 'var(--x)')⚠️ 双参数形式在 Safari 16.4–17.3 失效，慎用 - 使用前务必检查：
typeof CSS?.supports === 'function'，IE 和老安卓直接不定义
兜底方案：JS 赋值 + getComputedStyle 验证
当 CSS.supports() 不可用（如 IE 或 Android 4.4 WebView），就得退到运行时行为检测。核心是「设值 → 强制计算 → 读取是否留存」。
不能读 el.style['--x']，必须用 getComputedStyle(el).getPropertyValue('--x')：
- 创建临时元素：
const el = document.createElement('div') - 赋值：
el.style.setProperty('--test', '1')（注意：某些 Android 4.4 WebView 中该方法返回undefined，需先判断是否存在） - 触发计算：
getComputedStyle(el) - 读取验证：
getComputedStyle(el).getPropertyValue('--test') === '1' - 大小写敏感：
--Test和--test是不同变量，测试时保持一致
最容易被忽略的点：支持 ≠ 生效
@supports (color: var(--x)) 返回 true，只说明浏览器能解析该语法，不代表它在所有上下文都起作用。
比如：--x 在 @keyframes 内部、::before 伪元素中、或被 all: initial 重置后，仍可能被忽略。验证行为比验证语法更关键——如果业务逻辑依赖变量在特定节点生效，得在真实 DOM 结构里实测 getComputedStyle(target).getPropertyValue('--x')，而不是只信 @supports 的返回值。
