relative-color() 不支持降级，解析失败时整条声明被忽略；必须前置确定颜色值并配合 @property 声明 color 类型变量，@supports 检测需用 oklch() 等安全语法绕过。
不支持 relative-color() 的浏览器会直接忽略整条声明，不会 fallback 到前一个颜色值——它不是 var() 那种带兜底机制的函数，而是语法级不可识别。
relative-color() 为什么不能靠 var() 降级
relative-color() 是 CSS 颜色函数，解析失败时整条规则被丢弃，不像 var(--x, red) 还能用 fallback。写成 color: red; color: relative-color(...) 没用，因为后一行无效，浏览器就只认第一行；但如果你指望它“自动选黑或白”，那更不行——它根本不做判断，只做提取和变换。
- 典型翻车：在 Safari 16.3 或 Chrome 110 下，
color: relative-color(lch, var(--bg) l c h / 0.8)直接失效，文字变成继承色或初始色（通常是黑色），而不是你期望的浅色 -
relative-color()必须配合@property声明的自定义属性才能解析变量，否则var(--bg)在函数里就是未定义状态，连语法校验都过不去 - 它不接受
rgb()或hex字面量作为输入，只认已解析的颜色值（比如来自var()且该变量已被声明为color类型）
@supports 检测必须绕过语法解析
直接写 @supports (color: relative-color(lch, red l c h)) 会被所有浏览器当成非法语法跳过——CSS 解析器在遇到不认识的函数时，整个条件表达式判为 false，甚至不进规则块。必须用“字符串逃逸”方式绕过。
- 正确写法：
@supports (color: oklch(0% 0 0)) { ... }或@supports (background: relative-color(lch, red l c h)) { ... } - 优先检测
oklch()，因为它比relative-color()更早进入标准，Chrome 111+、Safari 16.4+、Firefox 119+ 都稳定支持，且无行为差异 - 别用
@supports (color: color-mix())，这个写法在旧引擎里直接报错，导致整个@supports块被忽略
降级方案要分层：先保色值，再保逻辑
真正可行的降级不是“用 JS 补上”，而是在 CSS 层做到两件事：确保颜色可读（基础可用），再在支持时叠加亮度适配逻辑。不要试图让不支持的浏览器也“算对比度”。
- 基础层：所有用到
relative-color()的地方，前面必须有一行确定的、可工作的颜色声明，比如color: #000; color: relative-color(...); - 逻辑层：用
light-dark()做简单主题切换兜底，例如color: light-dark(#000, #fff);—— 它在 Safari 15.4+、Chrome 111+ 支持，IE 和旧 Firefox 当作无效忽略，但至少不崩 - 别把
relative-color()和color-mix()套在一起降级，比如color: relative-color(lch, color-mix(in srgb, ...))，旧浏览器连外层函数都解析不了，整行废掉
最易被忽略的一点：即使写了 @property，也要确保它声明在 :root 且类型为 color，否则 relative-color() 在任何浏览器里都拿不到有效输入——这跟兼容性无关，是语法前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
