回退值仅在变量名完全不存在或声明为空白（--x: ;）时触发；变量声明为空字符串、initial、拼写错误等均视为已定义，不启用回退。
回退值只在变量“真未定义”或“语法非法”时触发
很多人写 color: var(--text-color, #333); 却发现没 fallback 到 #333，根本原因不是语法错，而是变量其实“已存在”——哪怕值是空字符串 ""、initial、inherit 或拼错的 bluue，浏览器都视为“已声明”，直接取该值，跳过回退逻辑。
验证是否真未定义：getComputedStyle(el).getPropertyValue('--text-color') 返回 null 才算未定义；返回 "" 就说明它被声明过（比如 :root { --text-color: ""; }），此时回退完全不启动。
- ✅ 触发回退：变量名拼错（
var(--text-colr, #333)）、变量从未在任何作用域出现、或声明为空白（--x: ;） - ❌ 不触发回退：
--x: ""、--x: initial、--x: transparent、--x: none、--x: 12（缺单位）——这些全是“已定义但值无效”，CSS 会丢弃该属性声明，降级为继承值或浏览器默认，而非走回退
嵌套回退写法正确但作用域不对
var(--a, var(--b, #000)) 语法合法，但 --b 的查找范围仅限于当前选择器作用域（包括继承链），不会自动向上穿透到 :root。如果 --b 只在 :root 定义，而你在 .card 里用这个嵌套表达式，且 .card 没定义 --b，那第二层回退才会生效。
- 作用域独立：每个
var()的第二个参数中嵌套的var(--b, ...)，其--b在当前 CSS 块内查找，不跨作用域“自动继承” - 避免循环：禁止
--a: var(--b, red); --b: var(--a, blue)，整条声明会被浏览器静默忽略 - 嵌套建议≤2层，最内层必须是字面量（如
#fff、1rem），否则旧 Safari 可能丢弃整条声明
JS 动态设置变量后回退失效
用 JS 执行 el.style.setProperty('--size', '') 后，font-size: var(--size, 16px) 依然取空字符串，不会 fallback。因为 '' 是合法字符串值，不是“未定义”。
- JS 设置空字符串 = 显式赋值，等价于 CSS 里写
--size: "" - 想清空并触发回退？只能删掉该变量声明（
el.style.removeProperty('--size')），或设为unset（但要注意unset会继承父级值，不是真正“无”） - 构建时可加 lint 规则，禁止对关键变量赋空字符串字面量，从源头减少污染
旧浏览器（如 IE11）根本无视 var() 语法
IE11 遇到 var(--x, #000) 不是“fallback 失效”，而是整条 CSS 声明被 parser 直接跳过，连回退值都不解析。你看到样式丢失，不是代码问题，是浏览器能力缺失。
- 必须用
postcss-custom-properties构建时静态替换，且配置preserve: true（保留新语法供现代浏览器用） - 变量值必须是静态常量（如
--gap: 12px），不能含calc()或嵌套var()，否则插件无法求值，IE 仍看到var()并丢弃整行 -
@supports (background: var(--x))在 IE11 会报错，别用它做运行时检测
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
