即将来临的CSS供应商前缀灾难

关键要点

• CSS 供应商前缀（特别是 -webkit 前缀）的过度使用，给 Web 标准和跨浏览器兼容性带来了潜在问题。开发人员经常使用这些前缀来访问新功能，但这可能导致非标准化的、特定于浏览器的代码。
• 万维网联盟 (W3C) 正在考虑在非 WebKit 浏览器中支持 -webkit 前缀。但是，这可能导致同一属性的实现不兼容，并进一步鼓励开发人员使用 WebKit 特定的属性，这可能会使它们成为事实上的标准。
• 此问题的责任在于开发人员和浏览器厂商。开发人员需要避免编写特定于浏览器的代码，并在多个浏览器中测试其网站。同时，浏览器厂商应提供更多关于前缀属性的标准化状态的信息，并突出显示它们何时过时。

开发人员与 CSS 供应商前缀的关系是爱恨交织的。它们允许我们使用尖端技术，但代价是冗长的声明：

background-image: -webkit-linear-gradient(#fff, #000);
background-image: -moz-linear-gradient(#fff, #000);
background-image: -ms-linear-gradient(#fff, #000);
background-image: -o-linear-gradient(#fff, #000);
background-image: linear-gradient(#fff, #000);

理论上效果很好，但考虑一下实际情况：1. 实验性属性通常首先在 WebKit 引擎中实现，不能保证它们会在其他浏览器中复制。2. 很难确定供应商前缀属性是否是 CSS 规范的一部分。一些供应商不提交属性进行标准化。3. 即使标准属性发生更改，不正确的供应商前缀版本也会继续受到支持。旧代码仍然有效；您不会重新访问它来更正实现。

您经常会发现网站仅使用 -webkit 前缀——即使其他浏览器支持该属性或它在没有前缀的情况下具有广泛的可用性（例如 border-radius）。因此，Chrome 和 Safari 看起来比竞争浏览器更好——其他厂商对此并不满意。这个问题在 2012 年 2 月 7 日的 W3C 会议上被提出并讨论：> Web 标准倡导者正在教人们使用 WebKit。您将看到所有 Web 标准倡导者的演示文稿，他们倡导人们使用 WebKit 前缀。我们的工作是解决互操作性问题。目前，我们正在尝试确定在 Mozilla 中实际实现支持哪些以及多少个 WebKit 前缀属性。如果我们不支持 WebKit 前缀，我们将被排除在移动 Web 的一部分之外。

让我们仔细想想这一点。非 WebKit 浏览器将支持 -webkit 前缀。这是 W3C 正在考虑的解决方案。这个想法很可能会惨败。同一 WebKit 属性的两种或多种实现将不兼容，因此开发人员将无法在任何地方使用它。没有人会赢——包括 Apple 和 Google。但我更担心的是，如果该解决方案成功，它将造成的不可挽回的损害。一旦开发人员发现 WebKit 前缀在 Firefox、IE 和 Opera 中有效，他们就会期望它们在所有属性上都能有效。仅 WebKit 的采用率将呈指数级增长，供应商将被迫在整个过程中实现这些前缀。那时，无论任何 W3C 规范如何，WebKit 属性都将成为事实上的标准。游戏结束：开放式 Web 已关闭。其影响也超出了 CSS：许多新的 JavaScript API 都有供应商前缀。

谁该负责？

我们可以将失败的责任归咎于：

• W3C 工作组 Web 标准需要太长时间才能成熟。这可能是不可避免的，但浏览器厂商正在绕过这个过程。
• 浏览器厂商 他们急于推出新技术，很容易添加前缀然后忘记它。Web 开发人员需要更多信息：W3C 是否正在考虑该属性，以及何时取消前缀？在理想情况下，一旦浏览器实现标准属性，实验性前缀就会消失。厂商不会这样做，因为它会破坏网站，但他们可以做更多的事情来突出这个问题，例如提供过时检测工具或向开发者控制台输出错误消息。
• Apple 和 Google 两者都有罪，他们将 WebKit 前缀宣传成日常 HTML5 Web 开发的标准部分。Apple 被指控积极反对 W3C。
• Mozilla、Microsoft 和 Opera 其他厂商通常落后于 WebKit 浏览器数月——如果不是数年的话。添加 WebKit 前缀是一个荒谬的解决方案：是时候提高他们的水平了。
• 技术网站和布道者 我们都喜欢很酷的演示，但布道者经常忽略提及属性是实验性的，可能永远不会获得完整的浏览器支持（是的，这包括 SitePoint）。理想情况下，代码应该至少在两个浏览器中运行；至少这表明需要多个供应商前缀。
• Web 开发人员 我们太懒了。我们正在编写特定于浏览器的代码，虽然我们可能打算稍后更正它，但我们很少这样做。你还记得开发人员上次针对特定浏览器是什么时候吗？那是 IE6。十年后，我们仍在承受这一决定的影响。你真的想让历史重演吗？

是时候采取行动了

我反对非 WebKit 浏览器支持 WebKit 前缀。充其量，它使前缀无法使用。最坏的情况是，它破坏了整个标准化过程。您可能同意或不同意，但请向同事、博客和社交网络表达您的意见。W3C 和浏览器厂商会倾听您的反馈；您只需要提供一些反馈。然后在多个浏览器中测试您的网站。一点优雅的降级是可以的，但忽略一个或多个具有同等支持的现代浏览器是不行的。修复代码，否则您的网站正在加剧这个问题。

关于 CSS 前缀和 WebKit 的常见问题解答 (FAQ)

CSS 前缀（如 -moz-、-o-、-ms- 和 -webkit-）的用途是什么？

CSS 前缀，也称为供应商前缀，是浏览器制造商在新的 CSS 功能成为 W3C（万维网联盟）标准之前添加它们的一种方式。这些前缀确保新功能仅在其浏览器中有效。例如，-moz- 用于 Mozilla Firefox，-o- 用于 Opera，-ms- 用于 Microsoft Internet Explorer 和 Edge，-webkit- 用于使用 WebKit 引擎的浏览器，如 Safari 和旧版本的 Chrome。

什么是 WebKit 前缀危机？

WebKit 前缀危机是指非 WebKit 浏览器开始支持 -webkit- 前缀以确保与仅使用这些前缀的网站兼容的情况。这导致 Web 标准的碎片化，并使新浏览器更难以进入市场。

如何在我的代码中使用 CSS 前缀？

要使用 CSS 前缀，只需在样式表中的 CSS 属性之前添加它们即可。例如，要使用带有供应商前缀的 border-radius 属性，您可以编写：

background-image: -webkit-linear-gradient(#fff, #000);
background-image: -moz-linear-gradient(#fff, #000);
background-image: -ms-linear-gradient(#fff, #000);
background-image: -o-linear-gradient(#fff, #000);
background-image: linear-gradient(#fff, #000);

（以下问题答案类似，已省略，保持文章整体结构和信息完整性）

以上是即将来临的CSS供应商前缀灾难的详细内容。更多信息请关注PHP中文网其他相关文章！