是时候重新考虑CSS中的供应商前缀的时间

关键要点

• CSS 中 -webkit- 前缀的广泛使用导致某些网站在没有它时无法正常运行，迫使 Mozilla 为了提高 Firefox 与使用 -webkit 前缀的网页的兼容性而支持非标准的 -webkit- 前缀，这与 Microsoft Edge 和 Opera 的做法一致。
• 建议开发人员重新考虑他们对前缀的使用方法，并测试其网站的兼容性，特别是那些省略了 -moz- 前缀的网站，因为新的更改可能会影响其网站在 Firefox 46 或 47 上的性能。
• 随着 Chrome/Blink、Firefox 和 Microsoft Edge 团队寻求更好的解决方案，厂商前缀正逐渐消失。放弃厂商前缀意味着使用它们进行优雅降级并非可行的方法，开发人员应确保他们对前缀的使用不会在非 WebKit 浏览器中产生意外结果。

由于 -webkit- 前缀在网络上的 CSS 中占据主导地位，一些网站在没有它时无法正常工作。虽然这显然是过去几年开发人员做法不够理想的标志，但这导致 Mozilla 采取了一项相当不幸但几乎必要的措施。到 Firefox 46 或 47（分别于 2016 年 4 月或 5 月发布）为止，Mozilla 计划实现对一系列非标准 -webkit- 前缀的支持，以提高 Firefox 与使用 -webkit 前缀（通常是移动端）的网页的兼容性。

这不是一个新想法，Microsoft Edge 也支持一系列 -webkit- 前缀以确保兼容性。Opera 早在 2012 年就开始实现 -webkit- 前缀，此后已迁移到基于 WebKit 的 Blink 引擎。

W3C 和浏览器厂商并不打算在生产网站上使用厂商前缀：

“W3C 的官方政策声明，你不应该在生产代码中使用实验性属性，但人们确实这么做，因为他们想让网站看起来很酷，并保持在技术前沿。”——W3C 关于优化不同浏览器内容的页面

但是，各地的开发人员都想尽快使用它们来访问最新的功能。虽然前缀由于 WebKit 的主导地位而造成了一些混乱，但我认为它们成功地帮助网络快速发展。Mozilla 和 Microsoft 的方法可能对大多数网站无害。大多数在线网站可能已经包含了 -moz- 前缀，或者会发现 Mozilla 的更新无需任何操作即可提高其网站的兼容性。但是，作为专业的 Web 开发人员，我们需要做到彻底，并了解某些设计可能会出现异常结果。您可能已经知道您的哪些作品可能会因此更新而中断。

开发人员，现在显然是时候重新考虑您对前缀的使用方法并测试这些网站了。

涉及的前缀

Mozilla 可能需要包含一系列 -webkit- 前缀。据我了解，Mozilla 并不打算匹配 Edge 支持的 -webkit- 前缀列表，因为并非所有这些都可能需要确保 Mozilla 的 Gecko 布局引擎与更广泛的网络兼容。

根据他们在关于兼容性/移动/非标准兼容性的 wiki 页面上的说法，Mozilla 可能采用的前缀包括：

• -webkit-flexbox
• -webkit- 前缀的渐变
• -webkit-transforms
• -webkit-transitions
• -webkit-appearance
• -webkit-background-clip
• -webkit-device-pixel-ratio
• -webkit-animation
• -webkit-border*

其他一些功能也可能会受到影响，例如 @-webkit-keyframes。

跨浏览器测试至关重要

如果您是一位省略了 -moz- 前缀以避免需要在 Firefox 上测试较新 CSS 功能的 Web 开发人员——让我们假设您当时时间紧迫，并且客户强迫您这么做——您将需要在 Firefox 46 或 47 中重新测试该网站。这些版本的 Firefox 将于 4 月或 5 月发布，因此您有一些时间来提前计划。

为了在这些更改到达 Firefox 46/47 之前测试您的网站，您可以通过 about:config 中的 layout.css.prefixes.webkit 首选项访问 Firefox Nightly 中更改的当前状态。如果您安装了最新的 Nightly 版本，则默认情况下应将其设置为 true。并非所有 -webkit- 前缀更改都已在 Firefox Nightly 中出现，但是这是测试您的网站目前外观的地方。我建议等到大约 3 月份再使用 Firefox Nightly 进行更彻底的测试。

更紧急的是，Microsoft Edge 已经以这种方式解释和显示 -webkit- 前缀。这意味着您网站中包含的任何 WebKit 特定样式都可能已在您没想到的浏览器中显示。如果您尚未这样做，请在 Windows 10 中访问 Microsoft Edge 并测试这些网站！

厂商前缀正在消失

幸运的是，随着浏览器团队寻找更好的解决方案，厂商前缀似乎正在消失。Chrome/Blink 团队调整了他们的方法：

“展望未来，我们将不再使用厂商前缀默认启用功能，而是在 about:flags 中将（无前缀）功能保留在“启用实验性 Web 平台功能”标志后面，直到该功能准备好默认启用为止。”——Chrome/Blink 团队

Firefox 团队也正在朝着类似的方法前进：

“就其本身而言，Mozilla 内部目前的趋势是 [……] 通过在发布前关闭功能或如果功能足够稳定则不带前缀地发布功能来避免厂商前缀。至少作为一项通用策略；具体案例可能需要例外。”——来自 Mozilla 的 Boris

Microsoft Edge 旨在完全删除对前缀的支持：

“Microsoft 也正在摆脱 Edge 的厂商前缀。这意味着为了让开发人员能够利用特殊的 HTML5 或 CSS 功能，他们不必使用特定的 Edge 前缀。相反，他们只需根据 Web 标准进行编码即可。”——Mashable

不再通过前缀进行优雅降级

这种远离厂商前缀的举动意味着一个方面——通过厂商前缀进行优雅降级显然不可行。

使用厂商前缀来定位特定浏览器（例如，仅针对 Chrome 的特定内容）并非厂商前缀的本意；建议始终是开发人员使用所有可用的厂商前缀（从 -webkit- 到 -o-）。如果您正在使用依赖于带前缀属性的功能，并且您使用前缀在其他浏览器上优雅地降低了设计，那么这将不再起作用。

结论

时代在变。WebKit 的主导地位无意中导致了网络分裂和不兼容，其他浏览器正试图通过实现 -webkit- 前缀来提高其兼容性以跟上步伐。虽然随着厂商前缀的逐步淘汰，这个问题应该会消失，但开发人员需要检查他们对前缀的使用不会在非 WebKit 浏览器中产生意外结果。

有用链接

• Mozilla 关于这些更改的意图文档
• Mozilla 在 Bugzilla 中对此问题的错误跟踪
• Microsoft Edge 最新版本支持的 WebKit API
• 关于将 -webkit- 前缀引入网络生活标准的文档
• The Register 对 Firefox WebKit 兼容性更改的报道

关于 CSS 中厂商前缀的常见问题

什么是 CSS 中的厂商前缀，为什么要使用它们？

厂商前缀是浏览器制造商在新的 CSS 功能成为官方 CSS 规范的一部分之前添加它们的一种方法。它们用于确保这些新功能不会干扰其他浏览器中的现有功能。这允许开发人员试验新功能并向 CSS 规范过程提供反馈。

在现代 Web 开发中厂商前缀仍然必要吗？

厂商前缀的必要性一直是 Web 开发人员争论的话题。虽然它们曾经对于确保跨浏览器兼容性至关重要，但现代 Web 已经看到不同浏览器之间 CSS 功能的显著标准化。因此，对厂商前缀的需求大大减少，但在某些情况下仍然用于实验性功能。

一些常见的厂商前缀是什么？

一些常见的厂商前缀包括 -webkit-（Chrome、Safari、较新的 Opera 版本）、-moz-（Firefox）、-o-（旧的、预 WebKit 的 Opera 版本）和 -ms-（Internet Explorer 和 Microsoft Edge）。

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

要使用厂商前缀，只需在样式表中的 CSS 属性之前添加它即可。例如，要使用带有 Firefox 厂商前缀的 border-radius 属性，您可以编写 -moz-border-radius: 10px;。

使用厂商前缀的缺点是什么？

使用厂商前缀的主要缺点是它们会使您的 CSS 代码更复杂，更难维护。每个浏览器都有自己的厂商前缀，因此您可能需要为单个 CSS 属性编写多行代码。此外，厂商前缀可能会导致代码验证问题，因为它们不是官方 CSS 规范的一部分。

如何避免厂商前缀问题？

避免厂商前缀问题的一种方法是使用像 Sass 或 Less 这样的 CSS 预处理器，它可以自动将厂商前缀添加到您的代码中。另一种选择是使用像 Autoprefixer 这样的后处理器，它可以根据您想要支持的浏览器添加厂商前缀。

是否有使用厂商前缀的替代方法？

是的，有使用厂商前缀的替代方法。一种替代方法是使用像 Modernizr 这样的功能检测库，它允许您测试特定的 CSS 功能并为不支持它们的浏览器提供后备方案。另一种替代方法是使用 CSS Grid 或 Flexbox，它们现在得到了广泛支持，并且不需要厂商前缀。

CSS 中厂商前缀的未来是什么？

CSS 中厂商前缀的未来是不确定的。虽然它们在某些情况下仍在使用，但趋势是朝着标准化和使用功能检测而不是厂商前缀的方向发展。但是，它们很可能在可预见的未来仍然是 CSS 环境的一部分。

厂商前缀如何影响网站性能？

厂商前缀可能会影响网站性能，因为它们会增加 CSS 代码的大小。但是，影响通常很小，特别是如果您使用 CSS 压缩器来压缩代码。

如何及时了解有关厂商前缀的最新发展？

鉴于 Web 开发的快速变化性质，及时了解有关厂商前缀的最新发展可能具有挑战性。但是，关注 CSS 相关的博客、论坛和社交媒体帐户会有所帮助。此外，CSS 工作组的网站和 Mozilla 开发者网络是了解最新信息的极好资源。

以上是是时候重新考虑CSS中的供应商前缀的时间的详细内容。更多信息请关注PHP中文网其他相关文章！