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，但我发现至少最新的每晚firefox也会运行这个代码，即使它是供应商为webkit添加的前缀。

我不会担心，如果只有一个属性，可以支持Firefox或不。但有2个属性让我对只有其中一个工作的情况感到紧张。例如，支持-webkit-linear-gradient和不受支持-webkit-background-clip将与我的预期大不相同。那么，有没有什么方法可以检查浏览器对多个CSS规则的支持，并且如果至少其中一个缺失，gracefylly切换到回退？

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

Answer 1

在这种情况下，我总是发现检查MDN非常有帮助。在这种情况下，您可以检查文章linear-gradient,background-clip和-webkit-text-fill-color。在底部附近，总有一部分标题为浏览器兼容性。它在表格中列出了支持CSS规则和脚注的浏览器。例如，关于-webkit-text-fill-color，它说，

[1]此功能偏好layout.css.prefixes.webkit后面实现，默认为false。由于Gecko 49（Firefox 49.0/Thunderbird 49.0/SeaMonkey 2.46），首选项默认为true。

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

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

所以：你会被警告。

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

---

您的其他问题是，如果您可以在不支持规则时正常切换回退。不幸的是，这在纯CSS中是不可能的。虽然可以写rules that specifically target Chrome或Firefox，但我建议不要使用这些。你也许可以使用JavaScript检查支持，但这是我全心全意劝告的。

---

最后，“有没有国外供应商前缀支持任何列表（FF像-webkit-前缀支持）？” Sort of。再次，MDN通常非常完整并且是最新的。希望有所帮助。