旧版浏览器对新颜色语法静默跳过而非报错，fallback必须同一选择器内连续声明且前置兼容值，否则声明失效；如rgba()需前置#hex，oklch()需紧接#color，var()用逗号内置回退，color-mix()和color-contrast()须前置确定值。
旧版浏览器遇到新颜色语法不会报错，而是直接跳过整条声明——这意味着你没写 fallback，它就真“消失”了。
rgba() 和 hsla() 必须前置纯色 fallback
IE8 及更早版本完全不识别 rgba() 和 hsla() 函数，解析器看到就跳过整行。如果你只写 background-color: rgba(0, 0, 0, 0.5);，IE8 里背景会变透明或继承父级色，不是“半透”，是“没了”。
- 必须把兼容值写在前面：
background-color: #808080;再跟background-color: rgba(0, 0, 0, 0.5); - 别用
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(60% 0.18 250) 在 Safari 17.3、Firefox 120 或 Edge 114 之前会被整条丢弃——不是降级为灰色，是这条 color 或 background-color 声明彻底不生效，最终取继承值（深色背景下文字变黑，直接不可读）。
- fallback 不能拆到不同 class 或媒体查询里，也不能包在
@supports里；必须写成同一选择器下的连续声明：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(--primary) 和 color-mix() 看似都是函数，但 fallback 机制天差地别：前者靠逗号分隔内置 fallback，后者靠声明顺序覆盖。
立即学习“前端免费学习笔记（深入）”；
-
var()必须写在同一行、用逗号分隔：color: var(--text-color, #333);—— IE 直接忽略var()部分，取#333；写成两行（先color: #333;再color: var(--x);）在 IE 里反而失效 -
color-mix()不支持时静默失败，且不触发回退逻辑；必须前置静态色：background-color: #4a6fa5;→background-color: color-mix(in oklch, #4a6fa5 70%, white 30%); -
@supports (color-mix: )本身就不被 Safari 支持，不能用来包裹 fallback；@supports也识别不了color-mix()语法，整个块会被跳过
color-contrast() 必须带初始值，否则文字可能“隐形”
color-contrast() 目前仅 Chrome 111+ 实现，不支持时浏览器直接忽略该函数。如果你只写 color: color-contrast(#000, #fff);，那这行 color 就等于没声明，最终继承父级或回退到 UA 默认值（通常是黑色）——在深色背景上，文字直接看不见。
- 永远配一个确定的初始值：
color: #000;→color: color-contrast(#000, #fff); - 别把它当可访问性兜底方案：它的对比度算法和 WCAG 不一致，也不处理透明叠加场景
- 当前所有实现都不支持自定义阈值（如强制 4.5:1），它只返回列表中第一个满足默认对比度的颜色
最常被忽略的一点：fallback 不是“多写一行就完事”，而是要卡准浏览器的解析行为——旧引擎不报错、不警告、不提示，它只是安静地跳过你不该指望它认识的那部分。写错顺序、拆开声明、依赖 JS 检测，都会让 fallback 形同虚设。
