旧版浏览器对新颜色语法静默跳过而非报错，fallback必须同一选择器内连续声明且前置兼容值，否则声明失效；如rgba()需前置#hex，oklch()需紧接#color，var()用逗号内置回退，color-mix()和color-contrast()须前置确定值。
rgba() 和 hsla() 必须前置纯色 fallback
旧版浏览器（IE8 及更早）遇到 rgba() 或 hsla() 会直接跳过整条声明，不是降级为不透明，而是“消失”。比如只写 background-color: rgba(0, 0, 0, 0.5);，在 IE8 里背景可能完全透明或继承父级颜色，文字直接糊成一片。
正确写法是同一选择器内、连续声明，且兼容值必须在前：
button {
background-color: #4a6fa5; /* 先写 fallback */
background-color: rgba(74, 111, 165, 0.8);
}
- 不要用
background简写覆盖已有背景图——它会清掉background-image - 改用完整拼接：
background: #f0f0f0 url("bg.png") repeat;→background: rgba(240, 240, 240, 0.6) url("bg.png") repeat; - 别用
filter: alpha(opacity=)：它作用于整个元素（含文字、子节点），且在 IE8 中触发重排，性能差
oklch() / lch() 的 fallback 必须紧邻且不可拆分
oklch() 在 Safari 17.3、Firefox 120、Edge 114 之前会被整条丢弃——不是变灰，是这条 color 或 background-color 声明彻底不生效，最终取继承值。深色背景下文字可能直接不可读。
fallback 不能藏在 @supports 里，也不能拆到不同 class 或媒体查询中，必须是同一选择器下的连续声明：
a {
color: #3a5fc7; /* 必须紧挨着，且在前 */
color: oklch(0.6 0.2 240);
}
- JS 检测
CSS.supports('color', 'oklch(0% 0 0)')不可靠：返回false无法区分是函数不支持，还是参数格式错 - 别依赖自动转换工具输出的 hex 值：
oklch()色域比 sRGB 宽，蓝紫/高饱和绿区域容易发灰，建议手动校验视觉等效性
var() 和 color-mix() 的 fallback 机制完全不同
var(--x, #333) 和 color-mix() 都是函数，但 fallback 行为天差地别：
var() 的第二参数是逗号分隔的内置 fallback，IE 直接忽略 var() 部分，取 #333；而 color-mix() 不支持时静默失败，且不触发任何回退逻辑，必须靠声明顺序覆盖。
.card {
background-color: #4a6fa5; /* 先写静态 fallback */
background-color: color-mix(in oklch, #4a6fa5 70%, white 30%);
color: var(--text-color, #333); /* 同一行，逗号分隔 */
}
-
@supports (color-mix: )本身就不被 Safari 支持，不能用来包裹color-mix()声明 - SCSS 中写
var(--size, #{$fallback})是唯一安全的插值方式；calc(var(--font-base) * 2)这类嵌套在 IE 里无效 -
var()回退只在变量完全未声明或为unset/initial时触发；若已声明为空字符串或非法值（如--size: ;），回退不会生效
避免把 fallback 当成“默认值”来理解
很多人把 var(--color, red) 的 red 当作默认值，其实它是“回退值”——仅当 --color 根本没声明，或被显式设为 unset 时才启用。一旦变量被声明（哪怕值是 #ffg 或空字符串），浏览器仍尝试解析该值，回退就被跳过。
验证是否触发回退？用 JS 查：getComputedStyle(el).getPropertyValue('--size') 返回 "" 就说明变量存在但为空，此时 var(--size, 16px) 依然返回空字符串。
- 规避方法：避免显式赋空；或用 JS 修正：
el.style.setProperty('--size', size || '16px'); - 伪类（如
:root）中声明的空变量，会让所有后代元素的var()绕过回退 - 回退值不参与级联，只在当前
var()调用中起作用，不会影响其他属性或后续声明
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
