现代色彩语法在旧浏览器中整条声明被静默丢弃，fallback必须前置且连续声明于同一选择器内，@supports检测需写全参数并放对位置，display-p3需meta+color-gamut+fallback三者齐备，color-mix()须指定色彩空间且避免混用色域。
现代色彩语法（oklch()、color(display-p3)、color-mix()）在旧浏览器中不是“渲染不准”，而是整条声明被静默丢弃——文字变黑、背景消失、按钮透明，都是因为 fallback 没写对位置或没写够。
fallback 必须前置且连续声明
旧浏览器（Safari 15.3 及更早、Firefox 112 前、所有 IE）遇到不认识的颜色函数，不会报错，也不会降级，而是跳过整条 color 或 background-color 声明。唯一能依赖的机制是 CSS 层叠顺序。
-
color或background-color的 fallback 值（如#4a6fa5或rgb(74, 111, 165)）必须写在前面，且在同一选择器内紧邻下一行 - 不能拆到不同 class、媒体查询或
@supports块里——否则旧浏览器根本看不到它 - 不要用
background简写覆盖带图层的背景：它会清掉background-image；改用完整重写：background: #f0f0f0 url("bg.png") repeat;和background: oklch(0.85 0.15 240) url("bg.png") repeat; - IE8 需额外加
filter: progid:DXImageTransform.Microsoft.gradient模拟 alpha，且透明度十六进制必须严格换算：0.33 → 54，不是53或55
@supports 检测要写全、放对位置
@supports 是唯一可靠的检测方式，但它极易写错：漏参数、括号不匹配、检测目标不存在，都会导致整个块被跳过。
- 检测
oklch()用@supports (color: oklch(0% 0 0))，不是@supports (color: oklch)（语法错误） - 检测
color-mix()必须写完整有效声明：@supports (background: color-mix(in srgb, red, blue))，不能只写函数名 - fallback 颜色必须写在
@supports外部、同一选择器内且靠前；把@supports块写在前面，某些旧 Chromium 会忽略后续普通声明 - 别用
@supports not ()做降级——它在 Safari 15.4 前不支持，反而让所有浏览器都跳过
display-p3 和 color-mix() 的特殊陷阱
color(display-p3) 和 color-mix() 不仅要看函数是否支持，还要看渲染上下文和色彩空间是否激活。
立即学习“前端免费学习笔记（深入）”；
-
display-p3要生效，必须三者齐备：<meta name="color-scheme" content="light dark">（放在<head>最顶）、html { color-gamut: p3; }、以及前置 fallback 的color: #ff6b6b;+color: color(display-p3 0.98 0.35 0.35); -
color-mix()在 Firefox 默认用srgb-linear，Chrome/Safari 用srgb，不写in srgb会导致颜色在各浏览器间明显偏灰 -
color-mix()里混用rgb()和oklch()会直接解析失败；两个输入色必须同属一个色彩空间，比如都用in oklch - 别把
color-mix()结果赋给 CSS 变量再复用——旧版 Safari 对自定义属性里的函数解析更保守，优先写在具体选择器里
var() 回退和 hsl(from) 的安全边界
CSS 变量和 hsl(from) 看似灵活，但兼容性梯度比想象中陡峭。
-
var(--c, #333)在 IE11 中整条被忽略，必须配合前置声明：color: #333; color: var(--c, #333); -
hsl(from var(--base) h s calc(l - 10))兼容性优于color-mix()（Safari 16.2+ 即支持），但不支持 IE 和 iOS 12 以下 - 所有衍生色变量（如
--primary-600）必须基于单一基础色（--primary-base）计算，不能在组件里另起一套值，否则主题切换时无法联动 - PostCSS 插件只能静态替换同文件内、不含
calc()或 JS 注入的变量；构建后务必全局搜索var(--，确认无残留
真正卡住人的从来不是语法会不会写，而是哪一环漏了：meta 标签没放最前、color-gamut 没声明、@supports 括号里少了个 0%、或者以为 oklab() 和 oklch() 能互换检测——结果整套颜色在 Safari 16.3 上全变成黑色文字配白色背景。
