相对颜色语法（如rgb(from...)、hsl(from...)）在chrome 111+、safari 16.4+、firefox 120+才支持，旧版浏览器静默跳过整条声明；必须前置基础色声明实现回退，且@supports检测需用oklch()等安全探针。
相对颜色语法（如 rgb(from ...)、hsl(from ...)）在 Chrome 111+、Safari 16.4+、Firefox 120+ 才开始支持，旧版浏览器会静默跳过整条声明——不是降级，是彻底消失。必须靠层叠顺序 + 基础色前置实现回退。
相对颜色声明必须前置 fallback 颜色
浏览器解析 CSS 是从上到下、逐条执行的。遇到不识别的 rgb(from #333 100% 50% 20%)，直接跳过，不会往后找同名属性的前一个值——除非那个值是独立、未被包裹、且写在前面的普通声明。
- ✅ 正确：先写
color: #333;，再写color: rgb(from #333 100% 50% 20%); - ❌ 错误：把
rgb(from ...)写在前面，或包在@supports里再写 fallback - ⚠️ 注意：
@supports (color: rgb(from red r g b))在 Safari 16.3 及更早版本中会被整个规则块忽略，fallback 也跟着失效
不能用相对颜色输出值当 fallback
相对颜色本质是运行时计算，它的结果（比如 rgb(51, 51, 51)）本身没问题，但你不能把它当 fallback 写在前面——因为旧浏览器不认识 from 语法，连带它生成的任何中间值都不可信。更关键的是，你无法静态预知它的输出，尤其当基准色是 var(--primary) 时。
- 别写：
color: rgb(51, 51, 51); color: rgb(from var(--primary) r g b);—— 第一行看似安全，但实际是硬编码，脱离设计系统 - 应写：
color: var(--primary); color: rgb(from var(--primary) r g b);—— fallback 用原始变量，保证语义一致 - 如果
--primary本身是现代色函数（如oklch(...)），那它自己就得有 fallback，形成链式降级
@supports 检测要绕过语法解析陷阱
直接写 @supports (color: rgb(from red r g b)) 会失败：部分旧引擎在解析阶段就报错，整块规则被丢弃。必须用“已知安全”的色彩函数作为探针，且参数得合法。
- ✅ 推荐检测：
@supports (color: oklch(0% 0 0))—— oklch 支持早于相对颜色，且语法结构稳定 - ✅ 备选检测：
@supports (color: color-mix(in srgb, red, blue))—— 要求完整写法，不能省略in srgb - ❌ 禁止检测：
@supports (color: rgb(from ...))或@supports (rgb: from)—— 非法特性名，浏览器直接忽略 - 所有
@supports块里的相对颜色，仍需在块内重复前置 fallback，不能依赖外层
和 color-mix() / color-contrast() 混用时顺序更敏感
相对颜色常和 color-mix() 组合使用（比如 rgb(from color-mix(...) r g b)），但旧浏览器对这两个函数的支持断层不同：color-mix() 在 Safari 16.4+ 才启用，而相对颜色晚半步。一旦嵌套，fallback 必须覆盖最外层。
- 写法示例：
button {<br> background-color: #4a6fa5;<br> background-color: color-mix(in srgb, #4a6fa5 70%, white 30%);<br> background-color: rgb(from color-mix(in srgb, #4a6fa5 70%, white 30%) r g b);<br>} - 三行必须严格按此顺序：基础色 → color-mix() → 相对颜色，缺一不可
- 如果只写最后两行，Safari 16.3 会跳过全部；如果只写第一、三行，Chrome 110 会跳过第三行但保留第一行
真正容易被忽略的是：相对颜色的 fallback 不是“备用方案”，而是“唯一保底”。它必须能独立表达设计意图，不能依赖 JS 注入、不能藏在媒体查询里、也不能指望用户代理样式兜底——因为一旦失效，文字可能直接糊在背景上，连调试都难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
