在-moz-linear-gradient中使用CSS变量导致Chrome、Edge样式失效问题

问题产生原因 #

• -moz-linear-gradient是火狐早期推出的实验性前缀属性，现在的Chrome、Edge等Blink内核浏览器为了兼容历史网页代码，能识别该属性名，但并未对其做完整的语法适配，尤其不支持在该前缀属性中使用CSS自定义变量（var()语法）。
• CSS中同属性的声明遵循后写覆盖前写的规则：
  火狐完全支持-moz-linear-gradient和CSS变量，所以后写的前缀属性会覆盖前面的标准属性，样式正常生效。
  Chrome/Edge解析带变量的-moz-linear-gradient时，会因为属性值包含不支持的语法导致整条background声明异常，进而引发样式失效。

可行解决方案 #

方案1：直接移除过时的前缀声明（最为推荐） #

火狐从2012年发布的16版本开始就已经全面支持不带前缀的标准linear-gradient属性，-moz-linear-gradient属于早已淘汰的兼容性写法，没有保留的必要。直接删除所有-moz-linear-gradient相关的声明，所有主流浏览器都会走标准语法，CSS变量也能正常生效。

方案2：调整前缀属性的变量写法 #

如果确实需要兼容火狐15及更早的上古版本，可以将-moz-linear-gradient中的CSS自定义变量替换为固定色值，或者使用Sass、Less等预处理器的变量来替代原生CSS变量，避免Blink内核解析异常。

方案3：用特性查询隔离前缀代码 #

可以通过@supports特性查询，让带前缀的渐变代码仅在火狐浏览器下生效：

@supports (-moz-appearance: none) {
  .second::before {
    background: -moz-linear-gradient(128deg, transparent 51%, black 53%, var(--custom-color) 70%, transparent 72%) no-repeat bottom left;
  }
}

这样Chrome、Edge等非火狐浏览器不会解析这段前缀代码，自然不会出现样式失效问题。

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