应优先用 caniuse.com 搜索 css-colors 或具体函数名查看兼容性断层；@supports 检测必须写全声明如 (color: oklch(0% 0 0))，fallback 颜色须置于 @supports 外且在前，否则旧浏览器可能忽略导致无颜色。
查 color 属性兼容性，优先用 caniuse.com
直接打开 https://caniuse.com/，在搜索框输入 css-colors 或具体函数名（如 color-mix、oklch），就能看到各浏览器对颜色语法的支持断层。它比 MDN 更直观呈现「哪些版本开始支持」「哪些版本需前缀或降级」——比如 color-mix() 在 Safari 16.4+ 才启用，而 Chrome 111+ 和 Firefox 112+ 虽支持但默认混合空间不一致，caniuse 表格右上角的数字图标会链接到具体注意事项。
@supports 检测 color 函数必须写全声明，不能省略参数
想用 color-mix() 或 oklch() 前，得用 @supports 包裹，但写法极易出错：
-
@supports (color: oklch(0% 0 0))✅ 安全，检测基础色彩空间是否被识别 -
@supports (color-mix: oklch(0% 0 0) 50%, red)❌ Safari 16.3 及更早版本根本不认识color-mix这个特性名，整个规则会被跳过 -
@supports (color: color-mix(in srgb, red, blue))✅ 可用，但注意括号内必须是完整有效声明，不能只写函数名 - 别写
@supports (color: oklab(0 0 0))—— 当前主流浏览器基本不支持oklab()，检测永远失败，白写
fallback 颜色必须写在 @supports 外部，且顺序不能反
浏览器按 CSS 声明顺序解析，遇到无效语法就跳过，不会报错。所以 fallback 必须放在前面：
button {
background-color: #4a6fa5; /* 所有浏览器都认 */
background-color: color-mix(in oklch, #4a6fa5 70%, white 30%);
}如果把 @supports 块写在前面，旧版 Chromium 可能直接忽略后续的普通声明，导致最终没颜色。另外，color-mix() 在不支持的浏览器里是静默失效，不是报错，所以没 fallback 就等于颜色消失。
立即学习“前端免费学习笔记（深入）”；
IE8 及更早版本只吃十六进制和 rgb()，hsl()/rgba() 全挂
IE8 不解析 hsl()、hsla()、rgba()，连带 transparent 都会当黑色渲染。这不是“部分支持”，而是整条规则丢弃：
-
color: hsl(240, 100%, 50%)→ IE8 无视，继承父级颜色或用户代理样式 -
background: rgba(0, 0, 0, 0.5)→ IE8 直接丢弃，背景变透明（常表现为白色） - 解决办法只有降级：先写
#007bff或rgb(0, 123, 255)，再覆盖新语法 - 十六进制简写
#abc安全，但别写八进制rgb(012, 034, 056)—— Chrome 120+ 已报解析错误
真正容易被忽略的是：现代项目里看似没 IE，但某些企业内网仍跑着 IE8 兼容模式，或者 WebView 内核停留在旧版本，这时候漏掉 fallback 就是线上事故。
