css.supports()检测自定义属性必须用完整声明字符串，如'--theme-color: red'，不可省略值或添加括号；单参数形式兼容性更优，双参数在safari 16.4–17.3中失效。
CSS.supports() 能直接检测自定义属性（CSS 变量）是否被浏览器解析，但必须写成完整声明字符串，且不能带括号包裹——这是最容易翻车的地方。
检测 --my-var 是否被识别为合法 CSS 属性
自定义属性不是“值支持”，而是“声明语法支持”。浏览器只要能接受 --xxx: yyy 这种形式的声明，就视为支持。检测时不能只传属性名，也不能加括号。
- ✅ 正确：
CSS.supports('--theme-color: red')—— 声明完整，空格、冒号、值都到位 - ❌ 错误：
CSS.supports('--theme-color')—— 缺值，返回false - ❌ 错误：
CSS.supports('(--theme-color: red)')—— 括号是给and/or/not用的，单声明加括号反而失效（Chrome 120+、Safari 17.4 下已确认） - ⚠️ 注意：
CSS.supports('--theme-color', 'red')在 Safari 16.4–17.3 中返回false，必须用单参数形式
为什么 @supports (--var: value) 在 CSS 里能用，JS 里却不能照搬？
CSS 的 @supports 规则允许省略括号来包裹单条件，但 JS 的 CSS.supports() API 不继承该宽松语法。它严格按 CSSOM 规范解析输入：只认标准声明字符串或逻辑表达式。
- CSS 文件中可以写：
@supports --color-scheme: dark { ... }（无括号，合法） - JS 中必须写：
CSS.supports('--color-scheme: dark')（无括号 ✅），而不是CSS.supports('(--color-scheme: dark)')（有括号 ❌） - 组合检测才需要括号：
CSS.supports('(display: flex) and (--primary: blue)')
兼容性兜底：IE 和老 Android Browser 怎么办？
CSS.supports() 在 IE 完全不支持（Edge 12+ 才开始），而老 Android Browser（4.3 及更早）连 getComputedStyle 都不稳定。此时只能退到“赋值 + 读取”法，但要注意变量名大小写和作用域。
- 创建临时元素：
const el = document.createElement('div') - 赋值并触发计算：
el.style.setProperty('--test', '1'); const computed = getComputedStyle(el); - 检查是否留存：
computed.getPropertyValue('--test') === '1' - ⚠️ 关键点：必须用
getPropertyValue()，不能用computed['--test']（IE/旧安卓不支持属性访问） - ⚠️ 注意：某些 Android 4.4 WebView 对
setProperty返回undefined，需先判断方法是否存在
真正容易被忽略的不是“怎么写”，而是“什么时候该信返回值”——CSS.supports('--x: y') 返回 true，只代表浏览器能解析该声明，不代表它能在所有上下文中生效（比如在 @keyframes 里或伪元素中仍可能被忽略）。验证行为比验证语法更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
