@supports 检测 CSS 变量必须用完整声明如(--x: red)或(color: var(--x))，不能省略值或加多余括号；CSS.supports()仅支持单字符串参数且需含冒号和合法值；IE 完全不支持 var()，降级需前置静态值；动态检测应使用 getComputedStyle.getPropertyValue。
用 @supports 检测 CSS 变量支持时必须带值
直接写 @supports (--color) 是无效的——浏览器会静默忽略整条规则，既不执行也不报错。它只认完整声明，比如 @supports (color: var(--x)) 或更底层的 @supports (--x: red)。
-
--x: red检测的是“能否解析自定义属性语法”，不是变量有没有被赋值；只要浏览器能接受这种声明形式，就返回 true -
color: var(--x)检测的是“能否识别var()函数调用”，更贴近真实使用场景，推荐优先用这个 - 不要加多余括号：
@supports ((--x: red))在 Safari 16.4–17.3 中会失败，@supports (--x: red)才是安全写法
CSS.supports() 的字符串参数不能省略值也不能加括号
CSS.supports('--color: blue') 是唯一稳定写法；CSS.supports('--color', 'blue') 在 Safari 16.4–17.3 中恒为 false，CSS.supports('(--color: blue)') 会被当作逻辑表达式解析而失效。
- 必须传单个字符串，且包含冒号和合法值（
red、1px、initial都可以，var(--x)不行） - IE 完全不支持
CSS.supports，调用前务必先判断typeof CSS.supports === 'function' - 返回 true 只代表语法可解析，不代表变量在所有上下文（如
@keyframes、伪元素）中都能生效
IE11 及更早版本需要完全绕过 var() 语法
IE 对 var(--x) 是彻底无视：整条声明被丢弃，连后备值 var(--x, #fff) 都不会解析——因为它根本不认识 var() 这个函数名。
- 正确降级方式是前置静态值：
color: #333; color: var(--text, #333);，靠后声明覆盖前声明 -
@supports在 IE 中本身就不支持，所以它只能用于现代浏览器增强，不能单独作为降级开关 - PostCSS 插件（如
postcss-custom-properties）只处理构建时已知的静态定义，JS 动态设置的document.documentElement.style.setProperty('--x', 'red')不会被替换
动态检测 fallback 要用 getComputedStyle + getPropertyValue
当需要运行时确认某个变量是否生效（比如主题切换后），不能依赖 CSS.supports()，得实测渲染结果。
立即学习“前端免费学习笔记（深入）”；
- 创建临时元素：
const el = document.createElement('div') - 设置变量并触发计算：
el.style.setProperty('--test', 'red'); const comp = getComputedStyle(el) - 读取必须用
comp.getPropertyValue('--test')，不能用comp['--test']（IE 和旧安卓 WebView 不支持） - 注意 Android 4.4 WebView 中
setProperty可能返回undefined，需先判空
真正容易被忽略的，是「支持语法」和「实际可用」之间的 gap：一个浏览器能解析 --x: red，不代表它能在 ::before 里正确继承该变量，也不代表 calc(var(--x) * 2) 一定能算出预期结果。验证行为比验证声明更关键。
