最稳的起点是@supports (color: oklch(0% 0 0))，Firefox 120+已支持oklch()但不支持color-mix()，且需显式声明in色彩空间；background-clip: text须用@supports not拦截降级。
@supports 检测 oklch() 是最稳的起点
Firefox 对 color-mix() 的支持仍缺失（截至 2026 年 9 月），但 oklch() 基础色函数已在 Firefox 120+ 中启用。所以别用 @supports (background: color-mix(in oklch, ...))——它在 Firefox 里直接语法报错，整条规则被丢弃。
必须改用更底层、更早落地的特性检测：@supports (color: oklch(0% 0 0))。这个写法能被所有现代浏览器正确解析，且 Firefox 只要支持 oklch 就会进块，Chrome/Safari 同样生效。
color-mix() 必须显式声明色彩空间，否则 Firefox 行为不一致
即使你通过 @supports 进入了新色彩区块，color-mix() 在 Firefox 和 Chrome 默认混合逻辑不同：Firefox 默认走 srgb-linear，Chrome 走 srgb，结果同一行代码在两处颜色偏灰程度不同。
所以不能省略 in 关键字：
- ✅ 正确：
color-mix(in oklch, oklch(0.5 0.2 240) 70%, oklch(0.8 0.15 250) 30%) - ❌ 错误：
color-mix(oklch(0.5 0.2 240) 70%, oklch(0.8 0.15 250) 30%)—— Firefox 当作无效值，回退到前一个颜色声明
in oklch，17.4 及更早版本会静默忽略整条 color-mix() 声明。
渐变中混用 oklch() 和 color-mix() 时，降级链要分层设计
你想用 color-mix() 生成中间色再塞进 linear-gradient()，但 Firefox 不支持 color-mix()，又不能让它整个渐变失效。
正确做法是把降级控制在 CSS 层级内，而不是靠 JS 或多套 class：
- 先写一层基础渐变（如
linear-gradient(to right, #4a6fa5, #6a5acd)），放在@supports块外，作为所有浏览器兜底 - 再在
@supports (color: oklch(0% 0 0))块内重写background-image，用color-mix()预算出 3–5 个停靠点，拼成多段渐变 - 避免嵌套
@supports：比如在 oklch 块里再查color-mix()，Safari 17.4 会因语法错误跳过整个外层块
Firefox 下 background-clip: text 无法 fallback，得靠 @supports not 显式拦截
background-clip: text 在 Firefox 中完全无效，而且它不会触发任何 fallback（不像 color-mix() 至少能回退到上一条颜色）。如果你写了 background-clip: text 却没加 @supports 隔离，Firefox 会直接忽略该声明，文字保持默认色，还可能覆盖掉你本意想保留的 color 值。
必须用否定检测提前截断：@supports not (background-clip: text) { .gradient-text { color: #333; } }
这个写法比 @supports (background-clip: text) 更可靠，因为否定检测不依赖新属性是否被识别，只看是否“不支持”，Firefox 稳定命中，且不影响其他浏览器的渲染流程。
立即学习“前端免费学习笔记（深入）”；
真正难处理的不是语法写错，而是你以为加了@supports 就万事大吉——它只管“能不能解析”，不管“解析后行为是否一致”。oklch() 支持了，color-mix() 的 in oklch 却还没跟上；background-clip: text 支持了，但 Firefox 根本不认。这些断层必须靠分层检测 + 显式 fallback 来缝合，而不是寄希望于某一行“兼容性开关”自动搞定。 
