@supports (color: var(--x)) 是唯一可靠写法，因 --xxx 非标准属性，@supports 仅识别规范属性的「属性: 值」对；检测自定义属性需用 css.supports('--theme-color: red')；降级样式应置于 @supports 外层；运行时验证更可靠。
@supports (color: var(--x)) 是唯一可靠写法
不能用 @supports (--color: red)，这行 CSS 会被浏览器静默丢弃——因为 --xxx 不是标准属性，@supports 只认「属性: 值」对，且必须属于规范定义的属性范畴。
真正要检测的是 var() 函数能否被解析和使用，所以必须把 var(--x) 放在标准属性值位置上。值名可以任意（比如 --x、--_），甚至不存在也没关系，只要语法合法。
-
@supports (background-color: var(--primary))✅ -
@supports (color: var(--theme-color, #000))❌ 部分旧引擎（如 Safari ≤9.1）会因 fallback 语法解析失败 -
@supports (--primary: blue)❌ 整条规则无效，不生效也不报错
CSS.supports() 检测自定义属性声明语法
JS 中用 CSS.supports() 检测自定义属性，目标不是“变量有没有值”，而是“浏览器能否接受 --xxx: yyy 这种声明格式”。必须传完整声明字符串，缺一不可。
-
CSS.supports('--theme-color: red')✅ 正确，空格、冒号、值全到位 -
CSS.supports('--theme-color')❌ 缺值，返回false -
CSS.supports('(--theme-color: red)')❌ Safari 16.4–17.3 中加括号反而失效 -
CSS.supports('--theme-color', 'red')⚠️ 双参数形式在 Safari 16.4–17.3 返回false，务必用单参数
IE 和老旧 WebView 的 fallback 天然存在
@supports 规则本身 IE 完全不识别，整块 CSS 直接跳过；Safari ≤9.0、Android 4.4 WebView 等也不支持 var()，所以降级样式写在 @supports 外层即可自动生效。
示例：
/* 降级：所有浏览器都执行 */
.button { background-color: #007bff; }
<p>/<em> 现代：仅支持 var() 的浏览器执行 </em>/
@supports (color: var(--x)) {
.button { background-color: var(--primary-color, #007bff); }
}</p>
- Chrome 49+、Firefox 31+、Safari 9.1+、Edge 16+ 支持该写法
- IE 无论版本，都不进
@supports块，天然走降级路径 - 不要依赖
@supports做逻辑分支，它只管语法支持，不管渲染是否一致
运行时验证比声明检测更可靠
当样式行为关键（比如主题切换依赖变量存在性），仅靠 @supports 或 CSS.supports() 不够——它们不保证变量实际可读或已注入。这时得用 DOM 方法验证：
- 创建临时元素：
const el = document.createElement('div') - 设置变量：
el.style.setProperty('--test', '1px') - 读取验证：
getComputedStyle(el).getPropertyValue('--test') === '1px' - 注意：
el.style.--test无效，必须用setProperty
这个方法兼容 IE9+，且能真实反映变量是否被识别并应用，比静态检测更贴近实际渲染链路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
