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 也会运行这段代码，即使它的供应商前缀为网络套件。

我不会担心只有一个属性，它可以被 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 检查支持，但我完全不建议这样做。

---

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