如何处理供应商前缀

如果您编写 CSS，几乎肯定需要在您编写的某些代码部分使用供应商前缀，以确保最佳的浏览器支持。无论是 -prefix-transform 之类的带前缀的属性，还是 @-prefix-keyframes 之类的带前缀的 @规则，或者 -prefix-linear-gradient 之类的带前缀的值，这都是 CSS 作者的日常工作。

这不仅是我们工作的一部分，而且也很容易出错。我最近查看了许多大型网站，专门寻找一些细微的 CSS3 错误，我能够在查看的任何网站上都找到一个。

那么，我们如何编写 CSS，才能始终使用正确的供应商前缀呢？

手动编写 - 参考 CSS3Please

手动编写是指您的网站在生产（“实时”）中使用的 CSS 是您在文本编辑器中自行编辑的 CSS 文件。选择此方法意味着您需要在该已编写文件中自己包含所有正确的供应商前缀。对我来说有点乏味且容易出错，但可能是世界上大多数网站的可能情况。

如果您的情况如此，最好的方法是参考最新的资源，例如 CSS3 please！。您可以在该网站上直接编辑值，并将其复制粘贴到您自己的样式表中。

如果您这样做，则意味着 **责任在于您** 要 保持内容更新。供应商前缀不像以前那样不稳定，但每隔几个月查看一次肯定是有必要的。

手动编写 - 不使用前缀 - 让 -prefix-free 在客户端处理

您仍然手动编写 CSS，但您只使用不带前缀的属性/值/@规则。 -prefix-free 是一段 JavaScript 代码，它运行时会查看所有 CSS，并在页面上追加新的样式，其中包含使这些样式生效所需的正确前缀（如有必要）。

这是一个备受争议的话题。它使 CSS 文件更小！是的，但它存在未应用 CSS3 样式的元素闪烁的风险！它需要使用 JavaScript 来设置样式，这会造成冲突！是的，但它只有 2k！由于它会在浏览器不再需要前缀时停止添加前缀，因此它是渐进增强功能的最佳体现！

由您决定。

还值得注意的是，jQuery 的 .css() 方法 将为您 添加一些前缀。

$("body").css({
  
  // Will NOT prefix
  "background": "linear-gradient(#ccc, #666)",

  // Doesn't need to, so won't
  "box-shadow": "inset 0 0 5px black",

  // WILL prefix
  "transform" : "rotate(5deg)"

});

我通常不赞成通过 JavaScript 应用 CSS，但了解这一点很重要，因为规则总有例外。

手动编写 - 使用 Prefixr 修复

如果您不喜欢手动编写前缀，但最终您的工作流程部署了手动编写的 CSS，则可以在部署之前通过 Prefixr 运行您的 CSS。它本质上会解析您的 CSS，查找需要添加前缀的内容，并为您添加前缀。

它非常智能，您不必拥有专门不带前缀的 CSS（例如 -prefix-free 所需的）。例如，如果您碰巧缺少三个必需的前缀之一，它会看到并只添加缺少的那个。

它还可以通过命令行或流行的文本区域 添加到工作流程中。

预处理 - 使用 mixin

使用 CSS 预处理器的一个主要原因是它可以帮助处理供应商前缀。

如果您使用 Sass，Compass 或 Bourbon 为您提供了强大的 CSS3 mixin 集。

如果您使用 LESS，我有一套，或者您可以查看 这篇汇总文章，其中比较了一些其他的 mixin 库。

手动编写 - 不使用前缀 - 使用 Autoprefixer 后处理

这是一种非常好的方法。 这篇文章中详细介绍了。本质上，您只需忘记添加前缀，此构建步骤将根据来自 CanIUse 的最新信息为您添加前缀。

“不要做”

我偶尔会看到一个错误，即人们在每个 CSS3 属性上都使用所有主要的前缀。他们似乎有一个通用的 mixin，他们只是将所有内容都通过它，并添加前缀。如果您看到类似 -o-border-radius 的内容，那就是我的意思。它从未存在过，也不需要添加到您的 CSS 中。

另一个错误是让 CSS 过时。正如我之前提到的，值得查看一下几个月前的 CSS，以确保它没有过时。如果您在此网站上看到任何过时的内容，请告诉我，我会立即更新。