Css Firefox对webkit供应商前缀的支持

我有这个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;
}

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

如果只有一个属性，firefox支持与否，我不会担心。但拥有两处房产让我对其中只有一处在工作的情况感到紧张。例如，受支持的

-webkit linear gradient

和不受支持的

-webkit background clip

的工作原理与我的预期大不相同。那么，是否有任何方法可以检查浏览器对多个CSS规则的支持，并在至少缺少一个CSS规则时优雅地切换到回退

---

还有，是否有任何外国供应商前缀支持列表（如FF中的

-webkit-

前缀支持）？

在这种情况下，我总是觉得检查非常有用。在这种情况下，您可以检查文章中的、和。在底部附近，总是有一个标题为“浏览器兼容性”的部分。它在表格中列出了支持CSS规则的浏览器，并在脚注中详细说明。例如，关于

-webkit文本填充颜色

，它说

[1] 此功能在首选项

layout.css.prefixes.webkit

后面实现，默认为

false

。自Gecko 49（Firefox 49.0/Thunderbird 49.0/SeaMonkey 2.46）以来，首选项默认为

true

这应该可以回答您的问题，即为什么支持带前缀的

-webkit-

版本，以及从何时开始。还要注意，在顶部，文章提到

此功能是非标准的，不在标准轨道上。不要在面向Web的生产站点上使用它：它不会适用于所有用户。实现之间也可能存在很大的不兼容性，并且行为可能会在将来发生变化

所以：你应该得到警告

在这种特殊的情况下，您可能能够逃脱您想要做的事情，至少在Firefox和Chrome中是这样。其他浏览器。。。那更棘手

---

您的另一个问题是，当规则不受支持时，您是否可以优雅地切换到回退。不幸的是，这在纯CSS中是不可能的。写或尽管是可能的，但我建议不要使用这些。您可以使用JavaScript检查支持情况，但这是我衷心反对的

---

---

最后，“是否有外国供应商前缀支持列表（如FF中的

-webkit-

前缀支持）？”。同样，MDN通常是非常完整和最新的。希望能有所帮助。

“是否有国外供应商前缀支持列表”-webkit-是您唯一需要担心的前缀。WebKit单一文化万岁。也许IE11和微软Edge也是如此。我仍然为事情的发展感到痛苦，但事实就是这样。