什么是-moz-和-webkit-?

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

I am a beginner at css and when I was looking at some css code the other day, I found these lines. In the tutorials I used to learn css, I have never seen anything like these lines. Could someone please explain these lines to me or give me a source where I could learn to implement lines like these?

我是css的初学者，有一天当我看到一些css代码时，我发现了这些行。在我以前学习css的教程中，我从未见过这样的代码行。谁能给我解释一下这些行，或者给我一个学习如何实现这些行的源?

Thanks in advance!

提前谢谢!

2 个解决方案

#1

These are the vendor-prefixed properties offered by the relevant rendering engines (-webkit for Chrome, Safari; -moz for Firefox, -o for Opera, -ms for Internet Explorer). Typically they're used to implement new, or proprietary CSS features, prior to final clarification/definition by the W3.

这些是由相关渲染引擎提供的供应商前缀属性(-webkit用于Chrome, Safari;-moz表示Firefox， -o表示Opera， -ms表示Internet Explorer。通常，在W3最终澄清/定义之前，它们用于实现新的或私有的CSS特性。

This allows properties to be set specific to each individual browser/rendering engine in order for inconsistencies between implementations to be safely accounted for. The prefixes will, over time, be removed (at least in theory) as the unprefixed, the final version, of the property is implemented in that browser.

这允许为每个浏览器/呈现引擎设置特定的属性，以便安全地解释实现之间的不一致性。随着时间的推移，前缀将被删除(至少在理论上是这样)，因为属性的无前缀、最终版本是在该浏览器中实现的。

To that end it's usually considered good practice to specify the vendor-prefixed version first and then the non-prefixed version, in order that the non-prefixed property will override the vendor-prefixed property-settings once it's implemented; for example:

为此，通常认为先指定供应商前缀的版本，然后指定非前缀的版本是很好的做法，以便在实现后，非前缀属性将覆盖供应商前缀的属性设置;例如:

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

Specifically, to address the CSS in your question, the lines you quote:

具体地说，为了解决你的问题中的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;

Specify the column-count, column-gap and column-fill properties for Webkit browsers and Firefox.

为Webkit浏览器和Firefox指定列数、列间距和列填充属性。

References:

引用:

• CSS Multi-column layout module.
• CSS多列布局模块。
• 'In defence of Vendor Prefixes' (Meyerweb.com).
• “保护供应商前缀”(Meyerweb.com)。
• Vendor prefix lists (Meyerweb.com).
• 供应商前缀列表(Meyerweb.com)。

#2

What are -moz- and -webkit-?

什么是-moz-和-webkit-?

CSS properties starting with -webkit-, -moz-, -ms- or -o- are called vendor prefixes.

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

---

Why do different browsers add different prefixes for same effect?

为什么不同的浏览器会添加不同的前缀以达到同样的效果?

A good explanation of vendor prefixes comes from Peter-Paul Koch of QuirksMode:

屈克斯默德的彼得-保罗·科赫对供应商前缀的一个很好的解释是:

Originally, the point of vendor prefixes was to allow browser makers to start supporting experimental CSS declarations.

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

Let's say a W3C working group is discussing a grid declaration (which, incidentally, wouldn't be such a bad idea). Let's furthermore say that some people create a draft specification, but others disagree with some of the details. As we know, this process may take ages.

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

Let's furthermore say that Microsoft as an experiment decides to implement the proposed grid. At this point in time, Microsoft cannot be certain that the specification will not change. Therefore, instead of adding grid to its CSS, it adds -ms-grid.

让我们进一步说，微软作为一个实验决定实现所提议的网格。此时此刻，微软不能确定该规范不会改变。因此，它不向CSS中添加网格，而是添加-ms-grid。

The vendor prefix kind of says "this is the Microsoft interpretation of an ongoing proposal." Thus, if the final definition of grid is different, Microsoft can add a new CSS property grid without breaking pages that depend on -ms-grid.

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

---

UPDATE AS OF YEAR 2016

2016年更新

As this post 3 years old, it's important to mention that now most vendors do understand that these prefix are just creating un-necessary duplicate code and that the situation where you need to specify 3 different css rules to get one effect working in all browser is an unwanted one.

这篇文章已经有3年的历史了，值得一提的是，现在大多数厂商都明白这些前缀只是在创建不必要的重复代码，而需要指定3个不同的css规则才能在所有浏览器中发挥作用的情况是不需要的。

As mentioned in this glossary about Mozilla's view on Vendor Prefix on May 3, 2016,

正如在本词汇表中提到的，Mozilla对2016年5月3日供应商前缀的看法，

Browser vendors are now trying to get rid of vendor prefix for experimental features. They noticed that Web developers were using them on production Web sites, polluting the global space, and making it more difficult for underdogs to perform well.

浏览器厂商现在正试图去掉实验性特性的供应商前缀。他们注意到，Web开发人员在生产Web站点上使用它们，污染了全球的空间，并使底层的人很难表现良好。

For example, just a few years ago, to set a rounded corner on a box you had to write:

例如，就在几年前，为了在一个盒子上设置一个圆角，你必须写:

-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;

But now that browsers have come to fully support this feature, you really only need the standardized version:

但是现在浏览器已经完全支持这个特性，你只需要标准版本:

border-radius: 10px 5px;

---

Finding the right rules for all browsers

为所有浏览器找到正确的规则

As still there's no standard for common css rules that work on all browsers, you can use tools like caniuse.com to check support of a rule across all major browsers.

由于在所有浏览器上都没有通用css规则的标准，您可以使用caniuse.com之类的工具来检查对所有主要浏览器的规则的支持。

You can also use pleeease.io/play. Pleeease is a Node.js application that easily process your CSS. It simplifies the use of preprocessors and combines them with best postprocessors. It helps create clean stylesheets, support older browsers and offers better maintenability.

你也可以使用pleeease.o /play。Pleeease是一个节点。可以轻松处理CSS的js应用程序。它简化了预处理器的使用，并将它们与最好的后处理器结合在一起。它帮助创建干净的样式表，支持旧的浏览器并提供更好的维护。

Input:

输入:

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

Output:

输出:

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;
}