我们还需要 `box-shadow` 或 `border-radius` 前缀吗？

Jay Hughes 提出的一个直接的问题

@chriscoyier 我们是否还需要在流行的项目（如 `border-radius` 和 `box-shadow`）上使用 `-moz` 和 `-webkit` 前缀？有没有关于此的文章？

— Jay Hughes (@graphicsjay) 2012年11月28日

我之前没有专门写过关于这方面的文章，所以让我们来写一篇吧！

简短回答

特别是对于 `box-shadow` 和 `border-radius`，可能不需要。

你只需要它们，如果

在极少数情况下，方形角或无阴影的回退会影响用户体验。
并且 **你的网站** 拥有大量 Firefox 3.6-、Safari 4-、iOS 3.2- 或 Android 2.3- 的访问流量。

详细回答

让我们更深入地探讨一下。首先，你可以在 Can I use… 上查看哪些浏览器支持哪些功能。

其次，你应该 **只** 基于你自己的网站的统计数据来做出关于功能支持的决定，而不是其他任何东西。

border-radius

Firefox 3.6- 需要 `-moz-`。从 4 开始，不带前缀的就可以。在这个网站上，大约 30% 的 Firefox 用户中，只有 0.3% 使用了 3.6 版本以下。

Safari 4- 需要 `-webkit-`。在这个网站上，这个比例甚至更小。大约 10% 的 Safari 用户中，只有 0.1% 使用了 4 版本以下。

iOS 3.x 也需要 `-webkit-`，这意味着从未升级过的 iPhone 3GS 或 iPad 1，这是最小的数字。

再说一次，**你的** 网站统计数据才是最重要的，但我猜大多数网站的总和都远低于 1%。

更不用说，不渲染的 `border-radius` 是“谁在乎”回退的典型代表。

box-shadow

阴影与之类似，但略微严格一些。 Firefox 和 iOS 的情况完全相同。 Safari 在 5.0- 中需要 `-webkit-`，但在三个月后的 5.1（与 OS X 10.7 一起发布）中修复了此问题。

最显著的区别是 Android 2.3 需要 `-webkit-`。 Can I Use 将其列为在 4.0 上需要，但我提交了更正，他们几个小时内就修复了，所以这很好！即使在这个网站上，我也看到了 0.5% 的比例，这比其他浏览器高得多。如果你的网站特别注重移动端，我相信这个数字会高得多。

没有阴影的回退可能没什么大不了的，但我确实遇到过它很重要的情况，所以就是这样。

Austin Knight

# 2012年12月12日

即使你需要添加前缀，你也可以使用 SASS 创建一个混合，这样你只需要写一行代码，而不是每次需要时为每个浏览器写 4 行代码 :)

Ian Lusk

评论永久链接# 2012年12月12日

如果你有一个大型的复杂网站代码库，这可能是一个问题。如果你使用了大量的前缀，你可能会通过只使用基本版本来减少 75% 的代码量，甚至更多。无论是否使用 SASS，根据你的代码，你可能可以通过只使用标准版本而不是供应商前缀来大幅减少文件大小。

我认为这里真正的问题是当你将其用于访问或重要的设计问题时。正如 Chris 所说，容器上的 `border-radius` - 如果你丢失它，这不是什么大问题。作为圆形网站主题设计一部分的圆形按钮上的 `border-radius` ……问题就大多了。

Edson

# 2012年12月12日

从去年年中开始，我就没有使用过这些前缀了！

Harry Williams

# 2012年12月12日

我最近一直在思考这个问题，特别是因为 Compass 会在你的样式表中加入 `-moz-` 和 `-webkit-`，但 Bourbon 则不会。

感谢你的分享。

# 2012年12月12日

我认为从一开始使用浏览器相关的自定义前缀就是一个坏主意。我同意使用 `-experimental-` 或 `-beta-` 前缀来向开发者提供信息，即最终结果可能会有所不同，但从一个浏览器重写到另一个浏览器的内容很奇怪且没有必要。

我记得有一件事在实现上有很大的区别。渐变在其早期阶段在浏览器中的定义方式不同，所以不同的前缀是有意义的。尽管如此，现在每个浏览器中的实现都应该相同，因为我们从这个错误中吸取了教训。它应该只遵循规范，就是这样。

所以一个 `-experimental-` 前缀就足够了。只是为了提醒大家规范将来可能会发生变化。（而不是实现！）

Steve Schrab

# 2012年12月12日

我非常喜欢 `prefix-free`。它允许你在不使用前缀的情况下编写代码，并处理一些旧的边缘情况浏览器。因此，你获得了一定程度的回退和更小的 CSS 文件。

Ricardo

# 2012年12月12日

我已经一年多没有再为 `box-shadow` 和 `border-radius` 使用供应商前缀了。

事实上，就在这个星期，我一直在考虑是否也要放弃 `linear-gradient` 的供应商前缀。

当然，SASS 的混合是一个巨大的帮助，而且在我的文件中多几行 CSS 代码对性能的影响非常小，不值得担心。

Josh Bryant

# 2012年12月12日

在 css3please.com 上，他们将 `background-clip` 与 `border-radius` 结合使用以防止“背景颜色泄漏到边框之外”。你是否也包含了它？

根据 caniuse.com 和 Chris 的逻辑，似乎我们通常也不需要为 `background-clip` 添加前缀。听起来对吗？

Josh Bryant

评论永久链接# 2012年12月12日

抱歉。这是在 caniuse.com 上关于 `background-clip` 的更正链接。

Isiah

# 2012年12月12日

我想这取决于查看者浏览器统计数据，以及你是否介意你的网站在某些用户上没有圆角和阴影显示。

如果你的设计能够在没有它们的情况下正常工作，那么就不使用前缀。

chovy

# 2012年12月12日

我几乎只在背景渐变和过渡中使用前缀。其他所有东西我都使用标准写法。

Leon Taveras

# 2012年12月12日

我总是添加前缀以确保它在所有或大多数版本的浏览器中都能正常工作。我认为 W3C 应该做一些事情来消除供应商前缀，它们真的很烦人。
当我需要添加前缀时，我使用这个 Sass 混合

@mixin prefixer($name, $argument) {
#{$name}: $argument;
-webkit-#{$name}: $argument;
-moz-#{$name}: $argument;
-ms-#{$name}: $argument;
-o-#{$name}: $argument;
}

chovy

评论永久链接# 2012年12月12日

对于新功能，前缀是一件好事……但一旦稳定下来，就可以删除它们。这取决于你对旧浏览器的关注程度。我们现在几乎可以假设每个人都使用最新的 Chrome、Firefox、Safari，以及至少 IE8。
tomasz86

评论永久链接# 2013年10月2日

我们现在几乎可以假设每个人都使用最新的 Chrome、Firefox、Safari，以及至少 IE8。

并非如此。仍然有很多移动设备运行着旧版本的系统（如 Android 2.3.x 等）及其默认的网络浏览器，这些浏览器将永远不会更新。

cnwtx

# 2012年12月12日

我使用 -prefix-free，它涵盖了所有这些，而且我不必担心它。我强烈推荐它！

Timur

# 2012年12月12日

我看不出有任何理由需要前缀，除了供应商的营销策略。它应该被 W3C 完全移除并禁止。代码变得太长了

chovy

评论永久链接# 2012年12月12日

前缀的原因很简单：它允许浏览器发布尚不属于标准的尖端功能。我认为前缀很好，应该用于新功能，你只需要每隔几年进行一些清理工作以去除它们。如果没有前缀，你将只能支持一个浏览器。在出现明确的标准之前，不会有太多浏览器支持。
Gage

评论永久链接# 2012年12月13日

@chovy，问题在于这些标准有相应的实施计划，浏览器生产商确实应该遵守，以便优化整个流程。

Larry Botha

# 2012年12月13日

需要记住的是，box-shadow 可能会对移动设备的性能造成影响。

仅在网站的桌面版本中使用 box-shadow 可能有利于用户体验，因此供应商前缀在很大程度上没有必要。

qbin

# 2012年12月13日

线性渐变呢？我们现在真的需要前缀吗？

Alan

评论永久链接# 2012年12月13日

是的，我想知道这个。我有很多行代码想删除。我只是希望 IE9 不需要那个讨厌的过滤器……

Alan

# 2012年12月13日

这是一篇不错的文章。实际上我刚刚删除了前缀，并且还为我正在开发的一个项目放弃了 CSS PIE。它是 100% 的桌面应用，并且我们 90% 的用户使用 IE9。

Patrick Samphire

# 2012年12月13日

“其次，你应该只根据你自己的网站的统计数据来做出关于功能支持的决定，而不是其他任何东西。”

我对此表示 90% 的同意，对于像圆角或阴影这样微不足道的事情来说，这确实是真的。但是，仅仅查看统计数据并认为你只需要处理这些浏览器就太容易了。但是，你从这些统计数据中得不到的是你可能拥有但目前没有的访问者，因为你的网站无法为他们提供充分的服务。

我认为这对移动设备尤其如此。例如，我有一些非常旧的网站，在移动设备上非常糟糕且几乎无法使用。这些网站在移动设备上的访问量很少也就不足为奇了。如果我仅仅根据我的访问者统计数据来判断，我会得出结论，我不需要费心支持小屏幕，因为只有极少数访问者属于此类。那将是一个错误。

所以，是的，要基于统计数据，但要谨慎，并意识到统计数据不是唯一的画面。

christian

# 2012年12月13日

我使用 -webkit- border-radius 前缀，因为它在早期版本的 Android 和 iOS 中是必需的，但没有使用 Firefox 的前缀，因为 Firefox 3.6 的用户不到我们网站流量的 0.001%。

CS3please.com 是一个很好的指南，可以告诉你是否应该包含前缀。
http://css3please.com/

SSchnitzler

# 2012年12月13日

如果你实际上是在为客户/公司工作。我建议使用带前缀的版本以及不带前缀的版本，以降低不兼容性，因为一些公司在更新其环境方面有点懒惰。

CiNiTriQs

# 2012年12月13日

我会一直使用它们，直到前面提到的浏览器版本变成恐龙。虽然 css 文件的“大小”可能是一个问题，但与通过实际使用 css3 进行样式设置而节省的“大小”相比，它是一个无关紧要的问题，因为 png 文件在复杂设计中可能会变得相当臃肿。无论如何，我期待着无前缀的网络！（或者至少对于那些不再是“实验性”的元素而言）。

Miss A

# 2012年12月13日

prefizr.com 会自动为你完成这些操作。对于所有 Sublime 用户，还有一个基于它的便捷插件。

Linx

# 2012年12月17日

我使用这个http://leaverou.github.com/prefixfree/

paolo

# 2012年12月19日

在不涉及移动设备的项目中，我将前缀放在 css 之外。在其他情况下，我只使用 -webkit 来（尝试）定位所有基于 webkit 的移动浏览器。

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。