css自定义属性支持检测本质是验证浏览器能否解析--prop: value声明语法，而非变量是否有值；css中唯一可靠写法为@supports (color: var(--x))，js中须用css.supports('--prop: value')单参数形式。
CSS自定义属性（即 --xxx）的支持检测，本质不是查“变量有没有值”，而是查浏览器能否解析 --prop: value 这种声明语法——不支持的浏览器会直接忽略整条规则，连 fallback 都不触发。
@supports (color: var(--x)) 是唯一能用的 CSS 检测写法
你不能写 @supports (--color: red)，这行 CSS 会被所有浏览器静默丢弃，既不生效也不报错。因为 @supports 只识别标准 CSS 属性名（如 color、display），而 --xxx 不在规范属性列表中。
真正要检测的是 var() 函数是否被识别和解析，所以必须把它放在一个标准属性的值位置上：
-
@supports (background-color: var(--_))✅ 变量名任意，甚至不存在也行，关键是语法合法 -
@supports (color: var(--theme, #000))❌ 旧 Safari（≤9.1）可能因 fallback 语法解析失败 - 降级样式必须写在
@supports块外层，IE 等不支持该规则的浏览器会自动跳过整个块，天然走兜底路径
CSS.supports('--prop: value') 的正确调用姿势
JS 中用 CSS.supports() 检测，目标仍是“声明语法是否被接受”，不是“变量是否已定义”。它对字符串格式极其敏感：
- ✅ 正确：
CSS.supports('--theme-color: red')—— 完整声明，空格、冒号、值缺一不可 - ❌ 错误：
CSS.supports('--theme-color')—— 缺值，返回false - ❌ 错误：
CSS.supports('(--theme-color: red)')—— 括号是给and/or逻辑用的，单条件加括号在 Safari 16.4–17.3 中必然失效 - ⚠️ 避坑：
CSS.supports('--theme-color', 'red')在 Safari 16.4–17.3 中恒返回false，务必只用单参数形式 - 使用前先判断：
typeof CSS.supports === 'function'，IE 完全不支持该 API
IE 和老旧 WebView 必须用运行时兜底法
当 CSS.supports() 不可用时，只能靠临时元素 + setProperty() + getComputedStyle() 组合验证：
- 创建元素：
const el = document.createElement('div') - 赋值并触发计算：
el.style.setProperty('--test', '1')；注意 Android 4.4 WebView 中该方法可能返回undefined，需先判空 - 读取验证：
getComputedStyle(el).getPropertyValue('--test') === '1'—— 必须用getPropertyValue()，不能用computed['--test']（IE/旧安卓不支持属性访问） - 这个方法检测的是“能否存、能否读”，但依然不保证变量在
@keyframes或伪元素中生效，行为验证比语法验证更关键
最容易被忽略的一点：无论 @supports 还是 CSS.supports() 返回 true，都只代表浏览器能解析该声明，不代表它在所有上下文中可用（比如某些 Android WebView 在 ::before 里仍会丢弃 var()）。真正在意渲染结果时，得直接检查目标属性的计算值，比如 getComputedStyle(el).backgroundColor 是否等于预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
