什么是-moz-和-webkit-？

Question

-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;

我是CSS的初学者，前几天查看了一些CSS代码时发现了这些行。在我学习CSS的教程中，我从未见过类似于这些行的东西。这些行的说明是什么？或者有没有一个来源，我可以学习如何实现这些行？

- idude

---

在编程中，这些都是阻碍，会鼓励你重复代码并使你的源代码变得糟糕：“我们有太多的浏览器，四五个！所以我们无法达成一致，你只是数百万程序员之一，所以请继续重复这些行并保持沉默，目前我们不想用if更不用说switch/case来破坏我们的代码。” - Hernán Eche

@HernánEche，你完美地总结了愚蠢的浏览器战争中可怕的一面。因为你的评论，这个问题受到了关注。谢谢！ - Rodrigo

Answer 1

以下是各个渲染引擎提供的供应商前缀属性(-webkit适用于Chrome、Safari；-moz适用于Firefox；-o适用于Opera；-ms适用于Internet Explorer)。通常它们用于在W3最终确认/定义之前实现新的或专有的CSS特性。

这使得属性能够针对每个单独的浏览器/渲染引擎进行设置，以便安全地解决实现之间的不一致性。随着未带前缀的属性在该浏览器中实施，前缀将会被逐步移除 (至少理论上如此)。

为此，通常建议先指定带有供应商前缀的版本，然后再指定未带前缀的版本，以便未带前缀的属性在实施后将覆盖供应商前缀的属性设置；例如：

.elementClass {
    -moz-border-radius: 2em;
    -ms-border-radius: 2em;
    -o-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
}

具体来说，为了解决你问题中的CSS，你引用的这些行：

-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;

为Webkit浏览器和Firefox指定column-count, column-gap 和 column-fill属性。

参考资料:

• CSS多列布局模块。
• “捍卫供应商前缀” (Meyerweb.com)。
• 供应商前缀列表 (Meyerweb.com)。

- David Thomas

---

+1。然而，谷歌还声明Chrome将不再为新功能添加前缀；如果该功能是实验性的，它将被隐藏在配置标志后面，并默认禁用，而不是带前缀。现有的前缀将在短期内保持原状，并通过正常流程删除。 - Spudley

@Spudley：真的吗？天哪，那似乎很烦人：我宁愿通过使用前缀来惊喜地发现新的CSS技术，而不是明确地寻找打开新功能的方法。顺便问一下，据你所知，是单个标志来打开所有实验性功能，还是一个清单来逐个打开各个功能？ - David Thomas

谷歌想要表达的观点是，如果一个功能是实验性的，那么它不应该在生产网站中使用；默认禁用可以防止这种情况发生，因为最终用户不会启用它，但Web开发人员仍然可以进行实验。如果一个功能已经准备好投入生产，那么它就不需要前缀了。这就是理论。我个人认为这是一种明智的做法；整个前缀的想法让我们陷入了重复代码的混乱之中：W3C对新标准拖延了时间，没有人想等待它们被最终确定后再使用新功能。 - Spudley

我感到困惑的是，为什么你要同时使用border-radius和各个厂商的私有前缀？是因为border-radius还没有成为W3标准吗？为什么不直接使用border-radius，而要用厂商特定的前缀呢？ - Chris Smith

@ChrisSmith 我可能会迟到，但我想告诉你原因。由于某些CSS规则尚未标准化，一些供应商仍希望实现它。因此，一些浏览器只能使用“-webkit-”前缀来识别border-radius，而其他浏览器需要“-moz-”前缀。随着时间的推移，新规则现在已成为标准，并且供应商开始不使用前缀实现该规则。他们以不同的速度进行这样做，因此Firefox可能比Chrome更早地支持它。但是，当它支持时，它将使用标准，因为标准是在前缀版本之后定义的。 - Mischa

关于Chrome引擎的更新：自28版本以来，Chrome使用Blink而不再使用Webkit。 - Vítor França

Answer 2

-moz-和-webkit-是什么？

以-webkit-、-moz-、-ms-或-o-开头的CSS属性被称为供应商前缀。

---

为什么不同的浏览器会为相同效果添加不同的前缀？

关于供应商前缀的一个很好的解释来自Peter-Paul Koch的QuirksMode:

最初，供应商前缀的目的是允许浏览器制造商支持实验性的CSS声明。

假设W3C工作组正在讨论网格声明（顺便说一下，这不是一个坏主意）。进一步说， 有人创建了草案规范，但其他人对细节表示反对。正如我们所知， 这个过程可能需要很长时间。

更进一步地说，Microsoft作为一项试验决定实现建议的网格。 在此时刻，Microsoft不能确定规范是否会改变。因此，它不是将网格添加到其CSS中， 而是添加了-ms-grid。

供应商前缀有点像“这是Microsoft对正在进行的提案的解释”。 因此，如果网格的最终定义不同，Microsoft可以添加一个新的CSS属性网格， 而不会破坏依赖于-ms-grid的页面。

---

截至2016年更新

由于这篇帖子已经有3年历史了，重要的是要提到现在大多数供应商都明白这些前缀只是创建不必要的重复代码， 需要在所有浏览器中指定三个不同的CSS规则才能使一个效果正常工作的情况是不期望出现的。

如此关于Mozilla对Vendor Prefix的看法所述：

浏览器供应商现在试图摆脱实验性功能的供应商前缀。他们注意到Web开发人员正在将它们用于生产网站， 污染全球空间，并使弱势人群更难以表现良好。

例如，仅仅几年前，为了在一个框上设置圆角，你必须编写以下代码：

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px;

但是现在浏览器已经完全支持了这个功能，你只需要使用标准化的版本：

border-radius: 10px 5px;

---

找到适用于所有浏览器的正确规则

由于仍然没有适用于所有浏览器的常见CSS规则标准，您可以使用诸如caniuse.com之类的工具来检查一个规则在所有主要浏览器上的支持情况。

您还可以使用pleeease.iamvdo.me/play/。 Pleeease是一个Node.js应用程序，可以轻松处理您的CSS。 它简化了预处理器的使用，并将它们与最佳的后处理器相结合。 它有助于创建干净的样式表，支持旧浏览器并提供更好的可维护性。

输入：

a {
  column-count: 3;
  column-gap: 10px;
  column-fill: auto;
}

输出：

a {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  -webkit-column-fill: auto;
     -moz-column-fill: auto;
          column-fill: auto;
}

- Raman Sahasi