CSS -moz- 和 -webkit- 是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18083056/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What are -moz- and -webkit-?
提问by idude
-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 的教程中，我从未见过这样的行。有人可以向我解释这些行，或者给我一个可以学习实现这些行的来源吗？
回答by David says reinstate Monica
These are the vendor-prefixed properties offered by the relevant rendering engines (-webkitfor Chrome, Safari; -mozfor Firefox, -ofor Opera, -msfor 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-gapand column-fillproperties for Webkit browsers and Firefox.
为 Webkit 浏览器和 Firefox指定column-count,column-gap和column-fill属性。
References:
参考：
回答by Raman Sahasi
What are -moz- and -webkit-?
-moz- 和 -webkit- 是什么？
CSS properties starting with -webkit-, -moz-, -ms-or -o-are called vendor prefixes.
首先是CSS属性-webkit-，-moz-，-ms-或者-o-被称为供应商前缀。
Why do different browsers add different prefixes for the same effect?
为什么不同的浏览器为相同的效果添加不同的前缀？
A good explanation of vendor prefixes comes from Peter-Paul Koch of QuirksMode:
对供应商前缀的一个很好的解释来自QuirksMode 的Peter-Paul Koch ：
Originally, the point of vendor prefixes was to allow browser makers to start supporting experimental CSS declarations.
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.
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 the grid to its CSS, it adds
-ms-grid.The vendor prefix kind of says "this is the Microsoft interpretation of an ongoing proposal." Thus, if the final definition of the grid is different, Microsoft can add a new CSS property grid without breaking pages that depend on -ms-grid.
最初，供应商前缀的目的是允许浏览器制造商开始支持实验性的 CSS 声明。
假设 W3C 工作组正在讨论网格声明（顺便说一句，这不是一个坏主意）。此外，假设有些人创建了规范草案，但其他人不同意某些细节。众所周知，这个过程可能需要很长时间。
此外，假设 Microsoft 作为一项实验决定实施提议的网格。目前，Microsoft 不能确定规范不会改变。因此，它没有将网格添加到其 CSS 中，而是添加了
-ms-grid.供应商前缀的意思是“这是微软对正在进行的提案的解释”。因此，如果网格的最终定义不同，Microsoft 可以添加新的 CSS 属性网格，而不会破坏依赖于 -ms-grid 的页面。
UPDATE AS OF THE YEAR 2016
2016 年更新
As this post 3 years old,it's important to mention that now most vendors do understand that these prefixes 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 thisglossary about Mozilla's view on Vendor Prefixon May 3, 2016,
正如提到这个词汇关于Mozilla的看法Vendor Prefix上May 3, 2016，
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 开发人员在生产网站上使用它们，污染了全球空间并使弱者更难表现出色。
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.comto 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 processes 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 maintainability.
您也可以使用pleeease.io/play。Pleeease 是一个 Node.js 应用程序，可以轻松处理您的 CSS。它简化了预处理器的使用，并将它们与最好的后处理器相结合。它有助于创建干净的样式表，支持旧浏览器并提供更好的可维护性。
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;
}
