CSS中-moz-linear-gradient触发Sonar Unexpected nonstandard direction报错如何解决

问题根源 #

你触发的是Sonar的CSS规则校验报错，核心原因有两点：

• -moz-linear-gradient是火狐早期的实验性非标准前缀语法，该规则本身就不在W3C标准范围内，Sonar的校验逻辑只识别标准无前缀linear-gradient的方向参数，所以无论你怎么调整前缀语法里的方向值，都会触发非标准方向的报错
• 目前火狐浏览器从2012年发布的Firefox 16版本开始就已经完全支持标准无前缀的linear-gradient属性，保留-moz前缀的渐变写法完全没有实际兼容价值

解决方案 #

方案1（推荐） #

直接废弃-moz-linear-gradient前缀写法，只保留标准语法即可，修改后代码如下：

/* progress bar FF */
progress::-moz-progress-bar {
  background-image: linear-gradient(to bottom, rgba(75, 108, 16, 1) 37%, rgba(134, 181, 29, 1) 69%);
}

修改后既不会影响任何主流浏览器的样式表现，也可以直接解决Sonar报错问题。

方案2（极端兼容场景使用） #

如果你的业务确实需要兼容Firefox 15及更早的远古版本，可以给对应代码行添加Sonar规则忽略注释，临时跳过该条校验：

progress::-moz-progress-bar {
  /* sonar-disable-next-line css:S4651 */
  background-image: -moz-linear-gradient(center bottom, rgba(75, 108, 16, 1) 37%, rgba(134, 181, 29, 1) 69%);
  background-image: linear-gradient(to bottom, rgba(75, 108, 16, 1) 37%, rgba(134, 181, 29, 1) 69%);
}

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