Firefox 支持 webkit 供应商前缀

Question

我有这个 SCSS 代码：

.gradient-text {
    color: mix(#cea427, #fbe758); // Fallback to average of 2 colors
    background: -webkit-linear-gradient(0deg, #cea427, #fbe758);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Fiddle

起初我只是想让这段代码在基于 webkit 的浏览器中工作，然后为 firefox 添加不同的方法，但我发现至少最新的 nightly firefox 也运行这段代码，即使它是供应商-为 webkit 添加前缀。

如果只有一个属性，我不会担心，firefox 支持或不支持。但是拥有 2 个属性让我对其中只有一个在工作的情况感到紧张。例如，受支持的 -webkit-linear-gradient 和不受支持的 -webkit-background-clip 将与我的预期大相径庭。那么，有什么方法可以检查浏览器对多个 CSS 规则的支持，并在至少缺少其中一个规则的情况下优雅地切换到后备？

此外，是否有任何外国供应商前缀支持列表（如 FF 中的 -webkit- 前缀支持）？

Answer 1

在这种情况下，我发现检查 MDN. In this case, you can check the articles for linear-gradient, background-clip and -webkit-text-fill-color 总是很有帮助。在底部附近，总有一个标题为 浏览器兼容性 的部分。它在 table 中列出了支持 CSS 规则的浏览器，并在脚注中进行了详细说明。例如，关于-webkit-text-fill-color，它说

[1] This feature is implemented behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

这应该可以回答您关于为什么支持 -webkit- 前缀版本以及从什么时候开始支持的问题。另请注意，文章顶部提到

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

所以：请注意。

在这种特殊情况下，您也许可以随心所欲地做事，至少在 Firefox 和 Chrome 中是这样。其他浏览器……这更棘手。

你的另一个问题是，当规则不受支持时，你是否可以优雅地切换到回退。不幸的是，这在纯 CSS 中是不可能的。虽然可以写 rules that specifically target Chrome or Firefox ，但我建议不要使用它们。您也许可以使用 JavaScript 检查支持情况，但我强烈反对这样做。

最后，"is there any list of foreign vendor prefixes support (like -webkit- prefix support in FF)?"Sort of。同样，MDN 通常非常完整 up-to-date。希望对您有所帮助。

Firefox 支持 webkit 供应商前缀

Firefox support of webkit vendor prefixes

css

firefox

webkit