firefox 119+需手动开启layout.css.color-mix.enabled标志并设为true，且color-mix()必须显式指定in srgb、百分比带%单位、避免变量和alpha色，否则静默失效。
Firefox 默认不启用 color-mix()，必须手动开启 layout.css.color-mix.enabled 标志，且仅限 Firefox 119+；低于此版本或未开启标志时，函数静默失效，不报错也不降级。
Firefox 119+ 如何开启 color-mix() 支持
该功能在 Firefox 中属于实验性特性，默认关闭。不开启就完全不识别 color-mix()，连语法解析都不会通过——不是颜色不对，是压根没效果。
- 在地址栏输入
about:config，点击“接受风险并继续” - 搜索
layout.css.color-mix.enabled - 若不存在，右键 → “新建” → “布尔值”，名称粘贴完整字段，值设为
true - 若已存在，双击将其设为
true - 重启浏览器后生效（无需刷新页面，但已加载的 CSS 不会重解析）
@supports 检测在 Firefox 中不可靠
Firefox 对 @supports 的色彩函数检测行为异常：写 @supports (color: color-mix(in srgb, red, blue)) 会被直接跳过，不触发规则块；它更认基础色函数。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 正确检测方式是：
@supports (color: oklch(0% 0 0)) { ... }或@supports (background: color-mix(in srgb, red 50%, blue 50%)) { ... } - 只检测
color-mix()本身容易漏判，尤其在旧版 Firefox（如 112–118）中，该函数虽存在但需标志+完整语法才可用 - 即使检测通过，仍需确保每个调用都显式带
in srgb（Firefox 不接受省略，也不默认 fallback 到 srgb）
常见静默失效原因（Firefox 特有）
Firefox 遇到错误的 color-mix() 不抛 Invalid property value，而是整条 CSS 声明被丢弃——你看到的是 fallback 色，却找不到报错线索。
-
color-mix(srgb, red 50%, blue 50%)：漏掉in关键字 → 失效 -
color-mix(in srgb, var(--primary) 50%, #000 50%)：混入 CSS 变量 → 失效（Firefox 不支持运行时解析） -
color-mix(in lch, red 50%, blue 50%)：Firefox 119+ 才支持in lch，118 及更早直接忽略 -
color-mix(in srgb, rgba(255,0,0,0.5) 50%, #000 50%)：含 alpha 的颜色 → 解析失败
开发测试时必须做的三件事
别依赖“开了标志就万事大吉”。Firefox 的 color-mix() 行为比 Chrome/Safari 更敏感，尤其在权重、空格、大小写上。
- 所有生产用例必须显式写
in srgb，哪怕你只打算用 srgb —— Firefox 不接受in sRGB（大小写敏感）或in SRGB - 百分比必须带
%单位，red 50或red .5全部静默失败 - 关键样式必须写 fallback 层叠：
color: #3b82f6; color: color-mix(in srgb, #3b82f6 70%, #1d4ed8 30%);，不能只靠第二行
真正难的不是开启开关，而是 Firefox 把“语法错误”和“功能未启用”都做成静默丢弃——你得靠 DevTools 的 CSS 面板逐条确认属性是否标为“无效值”，而不是等控制台报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
