旧版浏览器对新颜色语法静默丢弃整条声明，必须在同一选择器内前置静态fallback（如#rrggbb、rgb()），后置新语法（如rgba()、var()、oklch()），复合属性需拆解为原子声明，且fallback不可依赖@supports或JS检测。
旧版浏览器（IE11、iOS 12 Safari、Android 4.4 WebView 等）遇到新颜色语法不会报错，而是直接跳过整条 color 或 background-color 声明——这意味着没写 fallback，颜色就真“没了”，不是变灰，是继承黑色或透明。
rgba() 和 hsla() 必须前置纯色 fallback
IE8 及更早版本完全不识别 rgba() 和 hsla()，解析器看到就跳过整行。只写 background-color: rgba(0, 0, 0, 0.5);，IE8 里背景会变透明或继承父级色。
-
background-color: #000;必须写在前面，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 中触发重排，性能差
var() 的 fallback 必须写成两行、静态值在前
var(--c, #333) 在 IE 里完全无效——IE 连 var() 语法都不认识，整条声明被静默丢弃，不是降级为 #333，是样式链断裂。
- 正确写法：
color: #333;换行再写color: var(--c, #333);；IE 忽略第二行，用第一行；现代浏览器覆盖第一行 - 复合属性如
background、border必须拆成原子声明：background-color: #fff;+background-color: var(--bg, #fff);+background-image: url(img.png); -
border: 1px solid var(--border-color, #ccc);危险：IE 丢弃整条border声明，边框消失
oklch()、color-mix()、color-contrast() 需要同一选择器内连续声明
oklch() 在 Safari 17.3、Firefox 120 或 Edge 114 之前会被整条丢弃——不是降级为灰色，是这条声明彻底不生效，最终取继承值（深色背景下文字变黑，直接不可读）。
立即学习“前端免费学习笔记（深入）”；
- fallback 不能拆到不同 class 或媒体查询里，也不能包在
@supports里；必须写成同一选择器下的连续声明：color: #3a5fc7;紧接着color: oklch(0.6 0.2 240); -
color-mix()不支持时静默失败，且不触发回退逻辑；必须前置静态色：background-color: #4a6fa5;→background-color: color-mix(in oklch, #4a6fa5 70%, white 30%); -
color-contrast()没 fallback 时文字直接看不见；永远搭配初始值：color: #000;color: color-contrast();
HWB 和 lch() 类型必须手动转译或双写
hwb() 和 lch() 在旧浏览器中没有内置 fallback，遇到即丢弃整条规则，DevTools 里该行被划掉但无提示。
- 手写双声明是最稳妥方式：
background-color: rgb(100, 180, 220);→background-color: hwb(195 15% 10%);；rgb()必须写在前面 - 构建时用
postcss-preset-env启用features.colorFunction，但需确认 stage ≥ 3；postcss-cssnext已停更，不可依赖 - 别指望 JS 运行时动态计算——颜色需在 CSS 解析阶段就确定；CSSOM 无法可靠判断函数是否被解析成功
最容易被忽略的是：所有新颜色函数的 fallback 都必须在同一选择器内、连续、静态值前置——跨选择器、@supports 包裹、JS 注入变量、PostCSS 未覆盖的跨文件定义，都会让 fallback 失效。视觉校验比工具输出更可靠，尤其对蓝紫/高饱和绿区域。
