检测 CSS 变量支持需用完整声明格式：@supports(--x: y) 或 CSS.supports('--x: y')，缺值、括号错误或双参数均不可靠；必要时用 getComputedStyle(el).getPropertyValue('--x') 实测运行时生效性。
原生支持 CSS 变量（即 --xxx 自定义属性）的检测，不能靠 @supports (--color: red)，这个写法语法非法，浏览器直接忽略；也不能只查 CSS.supports('--color')，缺值就返回 false。必须用声明完整、格式合规的方式验证解析能力。
用 @supports 检测时必须写对声明格式
浏览器不认 --xxx 本身是“属性”，它只认 --xxx: value 这种完整声明是否可被解析。括号是必需的，值不能省略，也不能加多余括号。
- ✅ 正确：
@supports (--theme-color: blue)—— 声明完整，空格/冒号/值都到位 - ❌ 错误：
@supports --theme-color: blue—— 缺外层括号，整条规则被静默丢弃 - ❌ 错误：
@supports (--theme-color)—— 缺值，语法不完整，返回false - ❌ 错误：
@supports ((--theme-color: blue))—— 多余嵌套括号，虽不报错但无必要，且 Safari 16.4–17.3 中部分场景会失效
用 CSS.supports() 时优先用单参数形式
CSS.supports() 在 JS 中行为比 CSS 里的 @supports 更严格：它不接受双参数形式在旧 Safari 中的写法，也不接受带括号的单声明字符串。
- ✅ 推荐：
CSS.supports('--primary: #000')—— 单参数，兼容性最好（Chrome 120+、Safari 17.4、Firefox 121+ 全支持） - ⚠️ 避免：
CSS.supports('--primary', '#000')—— Safari 16.4–17.3 返回false，即使实际支持 - ❌ 错误：
CSS.supports('(--primary: #000)')—— 括号是给逻辑运算符用的，这里反而导致解析失败 - ⚠️ 兜底检查：
typeof CSS.supports === 'function'必须前置，IE 完全不支持该 API
降级方案：用 getComputedStyle + getPropertyValue 实时验证
当需要确认变量不仅“能声明”，还能在运行时被读取和应用（比如某些 Android WebView 或老 Edge），就得走 DOM 实测路径。关键不是赋值成功，而是能否从计算样式中取回值。
- 创建临时元素：
const el = document.createElement('div') - 设置变量：
el.style.setProperty('--test', '1px')（注意：先判断方法是否存在，Android 4.4 WebView 可能返回undefined） - 触发计算：
getComputedStyle(el) - 读取验证：
computed.getPropertyValue('--test') === '1px'—— 必须用getPropertyValue()，不能用computed['--test']（IE/旧安卓不支持属性访问）
真正容易被忽略的是：就算 CSS.supports('--x: y') 返回 true，也只代表浏览器能解析该声明，不代表它能在所有上下文生效——比如 @keyframes 内、伪元素中、或被 display: none 父级包裹时，变量可能被静默忽略。验证行为比验证语法更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
