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规则的支持，并且如果至少缺少其中一个，则优雅地切换到后备？

此外，是否有任何外国供应商前缀支持列表（如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检查支持，但这是我全心全意地建议的。

最后，＆＃34;是否有任何外国供应商前缀支持列表（如FF中的-webkit-前缀支持）？＆＃34; Sort of。同样，MDN通常是非常完整和最新的。希望有所帮助。

Firefox支持webkit供应商前缀

1 个答案: