color-contrast()不能直接使用，它仍是css color level 5草案，chrome 127+、firefox 125+、safari 17.4+均未默认启用，含变量、alpha或渐变时整条声明静默丢弃。
color-contrast() 不能直接用，写了等于没写
所有主流浏览器（Chrome 127+、Firefox 125+、Safari 17.4+）至今未默认启用 color-contrast()，它仍卡在 CSS Color Level 5 草案阶段。你在 DevTools 里看到该行被灰色删除线划掉，不是语法错，是浏览器压根不解析——连报错都不会有。
常见静默失效场景包括：
-
color: color-contrast(var(--bg) against #fff)→ 变量导致整条声明丢弃 -
color: color-contrast(rgba(0,0,0,0.8) against #fff)→ alpha 不被支持，返回transparent或忽略 -
@supports (color: color-contrast(#000 against #fff))→ 检测通过 ≠ 实际可用，无法覆盖真实动态背景
别信“开启 chrome://flags/#css-color-contrast 就能用”的说法：它只对硬编码色值（如 #333）和极简参数生效，一含变量或函数就退化。
lab() 和 lch() 要按浏览器能力分层兜底
lab() 和 lch() 已在 Chrome/Edge 111+、Safari 16.4+ 原生支持，但 Firefox 完全不认；oklab() 和 oklch() 更新，仅 Chromium 126+ 和 Safari 18.0+ 支持，兼容性更窄。
安全写法必须满足三点：
- 后声明覆盖前声明：
color: rgb(128, 128, 128); color: lab(53.2% -0.4 1.2); - 用
@supports (color: lab(0% 0 0))包裹增强样式（如高对比度焦点环），避免无效规则污染旧环境 - JS 动态计算时，别手写 sRGB ↔ LAB 转换，用
colorjs.io或culori，它们已处理 D65 白点、非线性映射和边界 clip
注意：lab() 的 a/b 值无理论上限，但 Safari 对 a/b > ±125 可能渲染异常，Chrome 会自动截断——别直接照搬设计工具（如 Figma）导出的 D50 数值。
相对颜色语法（rgb/from、hsl/from）现在就能放心用
rgb(from ...)、hsl(from ...) 等相对颜色语法已在 Chrome 111+、Firefox 115+、Safari 16.4+ 全面落地，且不依赖实验 flag，只要你不支持 IE 就可直接上线。
关键使用要点：
- 必须用空格分隔，逗号是老语法：
hsl(from var(--primary) h s calc(l - 20))✅，hsl(from var(--primary), h, s, calc(l - 20))❌ - alpha 通道必须用斜杠：
rgb(255 0 0 / 0.5)✅，rgb(255 0 0 0.5)❌（会被当成非法参数丢弃） - 变量名（如
h、s、l）是占位符，不是字符串，不能加引号或引号包裹 - 支持嵌套 calc，但不能调用其他函数：
calc(h + 180)✅，max(h, 50)❌
它真正解决的是“基于主题色派生辅助色”的硬需求，比如补色、明暗阶、饱和度微调——这些逻辑放在 CSS 里比 JS 更轻量、更可维护。
light-dark() 是目前最稳妥的主题色自动适配方案
light-dark() 已进入正式规范，Chrome 124+、Firefox 125+、Safari 17.4+ 均原生支持，但它有个硬前提：必须显式声明 color-scheme: light dark，否则函数值直接计算为 unset。
典型踩坑点：
- 只写
color-scheme: dark→light-dark()永远取第二个参数，无视系统偏好 - 把
light-dark()塞进@media (prefers-color-scheme)块里 → 逻辑嵌套，行为不可预测 - 试图用于非颜色属性（如
font-size）或带 alpha 的值（如rgba(0,0,0,0.1)）→ 浏览器忽略整条声明
推荐做法是把它当“原子色值”用：--text-primary: light-dark(#1f2937, #e5e7eb);，然后在组件中直接引用变量。这样既保持 CSS 主导权，又避免 JS 干预主题逻辑的耦合成本。
真正难的不是语法，而是接受一个事实：现代 CSS 新颜色函数不是“一键替换旧写法”的升级，而是要按能力切片、分层兜底、明确 fallback 路径——漏掉任一层，视觉就可能在某个浏览器里彻底崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
