什么是 -moz- 和 -webkit-？ [复制]答案

【问题标题】：What are -moz- and -webkit-? [duplicate]什么是 -moz- 和 -webkit-？ [复制]
【发布时间】：2013-08-07 15:06:33
【问题描述】：

-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 的教程中，我从未见过像这样的行。这些行的解释是什么？或者有没有我可以学习实现这样的行的来源？

【问题讨论】：

这些是编程中的一个挫折，它鼓励你重复代码并使你的源代码变得糟糕：“我们的浏览器太多了，四五个！所以我们无法达成协议，你只是一个数以百万计的程序员，所以请继续重复这些行并闭嘴，目前我们不想用 if 破坏我们的代码，更不用说 switch/case 了。”
@HernánEche 你完美地总结了愚蠢的浏览器战争的可怕面孔之一。只是因为您的评论而为问题加注星标。谢谢！

标签： css webkit

【解决方案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 属性。

参考资料：

【讨论】：

+1。但是，另外请注意，谷歌已经声明 Chrome 将不再为新功能添加前缀；如果该功能是实验性的，它将隐藏在配置标志后面，默认为禁用而不是前缀。现有前缀将在短期内保留，并将通过正常流程删除。
@Spudley：真的吗？天哪，这似乎很烦人：我宁愿对使用前缀的新 CSS 技术感到惊喜，也不愿明确地寻求启用新功能。顺便说一句，据您所知，打开所有实验性功能是一个标志，还是一个一个地打开单个功能的清单？
Google 试图说明的一点是，如果一个功能是实验性的，那么它不应该在生产站点中使用；默认为禁用不鼓励这样做，因为最终用户不会启用它，但网络开发人员仍然可以体验它。如果一个特性已经准备好投入生产，那么它就不需要前缀了。无论如何，这就是理论。我自己，我认为这是一种明智的做事方式；整个前缀的想法给我们留下了一堆重复的代码：W3C 在新标准上拖了后腿，没有人愿意等到它们最终确定后再使用新功能。
我很困惑的是为什么你使用常规的border-radius 以及供应商特定的？是因为border-radius 还不是 W3 标准吗？为什么不使用border-radius 而不是供应商特定的？
@ChrisSmith 我可能迟到了，但我想告诉你原因。虽然 CSS 规则仍未标准化，但一些供应商仍希望实施它。所以有些浏览器知道border-radius 只需要-webkit- 前缀，其他浏览器需要-moz- 前缀。随着时间的推移，新规则现在成为标准，供应商开始实施不带前缀的规则。他们以不同的速率执行此操作，因此 Firefox 可能比 chrome 更早地支持它。但是当它这样做时，它将使用标准，因为标准是在前缀版本之后定义的。

【解决方案2】：

什么是-moz-和-webkit-？

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

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

QuirksMode 的 Peter-Paul Koch 对供应商前缀进行了很好的解释：

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

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

让我们进一步说，作为一个实验，微软决定实施建议的网格。目前，微软无法确保规格不会改变。因此，改为将网格添加到其 CSS 中，它添加了-ms-grid。

供应商前缀的意思是“这是微软的解释正在进行的提案。”因此，如果网格的最终定义是不同的是，微软可以在不中断的情况下添加新的 CSS 属性网格依赖于 -ms-grid 的页面。

2016 年最新情况

这篇文章已经发布了 3 年，重要的是要提一下，现在大多数供应商都明白这些前缀只是创建了不必要的重复代码，并且需要指定三个不同的 CSS 规则的情况在所有浏览器中获得一种效果是不需要的。

正如this 词汇表中提到的，关于 Mozilla 对Vendor Prefix 的看法May 3, 2016，

浏览器供应商现在正试图摆脱供应商前缀以进行实验特征。他们注意到 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;
}

【讨论】：