Firefox中CSS from关键字兼容问题及替代方案求助

你使用的hsl(from)、rgb(from)是CSS Color Module Level 5中的颜色转换语法，目前Firefox尚未支持该特性，因此代码无法生效，仅显示透明效果。

基于你已定义的--primary-light变量（包含色相h和饱和度s），可以直接复用这些分量生成目标颜色，无需依赖未兼容的from语法，写法简洁且全浏览器兼容：

1. 替换--primary4的写法 #

原代码：

--primary4: hsl(from var(--prim-200) h 50% l);

由于--prim-200的色相、饱和度与--primary-light一致，直接复用变量调整亮度：

--primary4: hsl(var(--primary-light), 50%);

2. 替换--tr-primary3的写法 #

原代码：

--tr-primary3: rgb(from var(--prim-300) r g b / 0.2);

无需转RGB格式，直接用HSL的alpha通道实现半透明效果（与原颜色参数完全一致）：

--tr-primary3: hsl(var(--primary-light), 70% / 0.2);
/* 或者用传统hsla写法 */
--tr-primary3: hsla(var(--primary-light), 70%, 0.2);

如果后续需要从任意HSL颜色变量中提取分量，建议提前将色相、饱和度、亮度拆分为独立变量，方便后续复用：

/* 拆分基础颜色分量 */
--primary-h: 344;
--primary-s: 70%;
/* 基于分量定义衍生颜色 */
--prim-200-l: 80%;
--prim-200: hsl(var(--primary-h), var(--primary-s), var(--prim-200-l));
--prim-300-l: 70%;
--prim-300: hsl(var(--primary-h), var(--primary-s), var(--prim-300-l));
/* 生成目标颜色 */
--primary4: hsl(var(--primary-h), 50%, var(--prim-200-l));
--tr-primary3: hsl(var(--primary-h), var(--primary-s), var(--prim-300-l) / 0.2);

内容的提问来源于stack exchange，提问作者SherboDev