color-mix()在旧版浏览器（chrome 111前、safari 16.4前、firefox 112前）中完全不被解析，遇此函数即静默跳过整条声明，不报错也不警告；必须显式指定色彩空间（如in srgb）、使用颜色字面量、带%权重，且fallback需置于@supports外并前置。
旧版浏览器根本不解析color-mix()函数
不是语法错，是浏览器压根不认识这个函数——Chrome 111 之前、Safari 16.4 之前、Firefox 112 之前，遇到 color-mix() 直接跳过整条声明，连警告都不报。你写的 background-color: color-mix(in srgb, #000, #fff); 在这些环境里等价于没写这行，颜色回退到上一条有效值（比如继承色或透明），而不是变灰或报错。
漏写色彩空间（如in srgb）就彻底失效
color-mix() 必须带明确色彩空间，缺 in srgb 或 in oklch 就静默失败。旧版浏览器不支持任何色彩空间参数，所以哪怕写了 color-mix(in srgb, ...)，也会因整个函数不可识别而忽略整条规则。常见错误包括：
- 写成
color-mix(#000, #fff)（缺in和空间名） - 写成
color-mix(in lch, ...)（lch()本身在 Safari 16.3 及更早版本不被支持） - 权重格式错误：
red 60（缺%）、blue（无权重）、red 60%, blue 30%（总和≠100%，部分引擎直接丢弃）
用了CSS变量或currentcolor就无效
color-mix() 不接受动态值。以下写法全部失败：
Comet AI 浏览器
下载
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
-
color-mix(in srgb, var(--primary), #fff)→ IE、旧 Safari、旧 Firefox 全部静默跳过 -
color-mix(in srgb, currentcolor, #000)→currentcolor是运行时计算值，不满足字面量要求 -
color-mix(in srgb, #000 70%, transparent 30%)→transparent虽合法，但混合结果受父背景影响，在深色模式下可能完全不可见
@supports检测写错就白搭
很多人用 @supports (color-mix: ...) 检测，但这是无效语法——浏览器不认识 color-mix: 这个特性名，整块规则被忽略。正确做法是检测基础能力：
- ✅
@supports (color: oklch(0% 0 0))（检测色彩空间支持） - ✅
@supports (background: color-mix(in srgb, red, blue))（字符串形式绕过解析） - ❌
@supports (color-mix: oklch(...) 50%, red)（语法错误，不生效）
而且 fallback 必须写在 @supports 外部、同一选择器内、且顺序在前；否则旧浏览器可能根本读不到降级颜色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
