浏览器支持 CSS 自定义属性的最低版本是 Chrome 49、Firefox 31、Safari 9.1、Edge 15+；IE 全系不支持，且会忽略 @supports 规则，必须配合降级写法和运行时验证。
浏览器支持 CSS 自定义属性（--x）的最低版本是 Chrome 49、Firefox 31、Safari 9.1、Edge 15+；IE 全系不支持，且会直接忽略 @supports 规则——这意味着你不能只靠检测结果就认为变量“能用”，必须配合降级写法和运行时验证。
@supports (color: var(--x)) 是唯一合法的 CSS 检测写法
你不能写 @supports (--theme-color: red)，因为 --xxx 不是标准 CSS 属性，整条规则会被浏览器静默丢弃，连 false 都不返回。
-
@supports (background-color: var(--primary))✅ 合法：测试的是var()函数能否被解析，变量名是否存在无关紧要 -
@supports (color: var(--x, #000))❌ Safari ≤9.1 解析 fallback 语法失败，整块跳过 -
@supports (display: var(--layout))❌display不接受var()作为有效值，检测失效 - 降级样式必须写在
@supports块外层，否则 IE 根本看不到
CSS.supports('--x: red') 和 CSS.supports('color: var(--x)') 用途不同
前者检测浏览器能否解析自定义属性声明语法（即是否支持 --x: y 这种写法），后者检测能否解析 var() 在标准属性中的使用。两者都不检查变量是否已赋值或作用域是否生效。
-
CSS.supports('--theme-color: red')✅ 必须带值、冒号、空格可选，但不能缺 -
CSS.supports('--theme-color')❌ 缺值，返回false -
CSS.supports('--theme-color', 'red')⚠️ Safari 16.4–17.3 中恒返回false，务必用单参数字符串形式 -
CSS.supports('(--theme-color: red)')❌ 括号仅用于逻辑表达式（and/or），单条件加括号反而失效
IE 和老安卓 WebView 需要 JS 兜底检测
CSS.supports() 在 IE 中完全不存在，老 Android Browser（4.3 及更早）甚至 getComputedStyle 都不稳定，此时只能靠临时元素 + setProperty + getPropertyValue 验证。
立即学习“前端免费学习笔记（深入）”；
- 创建临时元素：
const el = document.createElement('div') - 赋值并触发计算：
el.style.setProperty('--test', '1px');然后getComputedStyle(el) - 读取必须用
computed.getPropertyValue('--test') === '1px'，不能用computed['--test']（IE/旧安卓不支持） - 注意某些 Android 4.4 WebView 中
setProperty返回undefined，需先判断方法是否存在
降级写法必须前置静态值，顺序不能颠倒
var(--x, #fff) 对 IE 完全无效——它连 var() 语法都不认识，整条声明被静默丢弃，不会 fallback 到后备值。
- 正确写法：
background: #007bff; background: var(--primary, #007bff);，IE 读第一行，现代浏览器覆盖第二行 - 错误写法：
background: var(--primary, #007bff);单独存在 → IE 渲染为默认背景色（如透明或继承值） - 所有现代样式必须包进
@supports块内，降级样式写在外面，并避免使用 IE 不认的属性（如gap、aspect-ratio） - 即使
CSS.supports('--x: y')返回true，也不代表变量已在:root中定义，或 JS 主题逻辑已执行完毕
真正容易被忽略的不是“怎么写检测”，而是“检测通过 ≠ 变量可用”——作用域、加载顺序、JS 注入时机都会让变量在运行时不可读，关键逻辑必须配合 getComputedStyle 实时读取验证，不能只信声明检测结果。
