@supports检测现代颜色格式必须用完整合法color声明，如(color: oklch(0% 0 0))，因浏览器不识别color-mix等特性名会静默忽略整块规则；fallback须置于@supports外且在前，否则旧版chromium可能跳过后续同名属性导致无颜色。
@supports 检测现代颜色格式，不能写函数名，必须用完整 color 声明，且值要合法、带单位、顺序严格——否则整块规则被跳过，fallback 也失效。
为什么 @supports (color-mix: ...) 会静默失败
浏览器不认识 color-mix 这个特性名，Safari 16.4 之前直接忽略整个 @supports 块。这不是“检测为 false”，而是语法不识别，连 fallback 都没机会执行。
-
@supports (color-mix: oklch(0% 0 0) 50%, red)❌ 所有旧版 Safari 和部分安卓 WebView 完全不解析 -
@supports (color: color-mix(in srgb, red, blue))✅ 可用，但必须是完整、可计算的声明，不能只写函数名 - 真正稳妥的入口是色彩空间本身：
@supports (color: oklch(0% 0 0))—— Chrome 112+、Firefox 121+、Safari 17.4+ 都认这个
@supports (color: oklch(0% 0 0)) 的写法细节
这个字符串不是占位符，是浏览器解析器的“密钥”。多一个空格、少一个 %、加个 deg，都可能让检测返回 false。
-
oklch(0% 0 0)✅ 安全，所有支持 OKLCH 的浏览器都能识别 -
oklch(0 0 0)❌ L 缺 %，Safari 16.x 返回 false -
oklch(0% 0.0 0.0)❌ C/H 用了小数但没单位，Chrome 112–115 某些版本拒绝解析 -
oklch(0% 0 0deg)❌ Safari 16.4–17.3 触发解析失败 - 别碰
oklab(0% 0 0)：截至 2026 年中，所有主流浏览器仍返回 false
fallback 必须在 @supports 外面，且顺序不能颠倒
CSS 是从上到下解析的。旧浏览器遇到 oklch() 或 color-mix() 会跳过整条声明，继续读下一条。但如果 @supports 块写在前面，某些早期 Chromium（如 Chrome 111 及更早）会直接忽略后续所有同名属性声明。
- ✅ 正确顺序：
background-color: #4a5568;→ 再写@supports (color: oklch(0% 0 0)) { background-color: oklch(60% 0.2 240); } - ❌ 错误顺序：把
@supports块放前面，fallback 放后面 —— 旧环境可能一条颜色都不渲染 - fallback 只能用广泛支持的格式：
#rrggbb、rgb()、hsl()、命名色；不能用oklch()或color-mix()输出作 fallback
color-contrast() 和 display-p3 的检测要点
这两个函数的检测比 oklch 更苛刻，参数缺一不可，格式错一点就失效。
-
color-contrast()必须带完整对比目标：@supports (color: color-contrast(#000 vs #fff to WCAG20/AA))—— 少to WCAG20/AA就失败 -
color(display-p3)检测只能用：@supports (color: color(display-p3 0 0 0))——@media (color-gamut: p3)不可靠，Firefox 不支持，且不等于引擎能解析 - display-p3 的值必须是 0.0–1.0 小数，空格不可省略，alpha 必须用
/分隔：color(display-p3 0.9 0.2 0.3 / 0.8)
最容易被忽略的不是“怎么写检测”，而是“检测语句本身是否被浏览器当作无效语法跳过”——它不像 JS 报错，而是静默丢弃整块规则，连 fallback 都救不了你。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
