Moz 和 Webkit 是什么？

小开

Moz 和 Webkit 是什么？

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

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

QuirksMode的彼得-保罗•科赫(Peter-Paul Koch)对供应商前缀给出了一个很好的解释:

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

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

再进一步说，微软作为一个实验决定实现提议的网格。在这个时候，微软不能确保规格不会改变。因此，相反为了将网格添加到 CSS 中，它添加了 -ms-grid。

供应商前缀有点像在说“这是微软的解释因此，如果电网的最终定义是不同的是，Microsoft 可以添加新的 CSS 属性网格而不会中断依赖于-ms-grid 的页面

2016年更新

这篇文章已经发表3年了，值得一提的是，现在大多数厂商都明白这些前缀只是在创建不必要的重复代码，而且需要指定三种不同的 CSS 规则才能在所有浏览器中达到一种效果的情况是不必要的。

正如这个术语表中提到的 Mozilla 对 May 3, 2016上的 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/。求你了是一个 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; }

最佳答案

这些是相关渲染引擎提供的供应商前缀属性(针对 Chrome 的 -webkit、 Safari、针对 Firefox 的 -moz、针对 Opera 的 -o、针对 Internet Explorer 的 -ms)。通常，它们用于实现新的或专有的 CSS 特性，然后由 W3进行最终的澄清/定义。

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

为了达到这个目的，通常认为最好的做法是先指定供应商前缀的版本，然后再指定无前缀的版本，以便无前缀的属性在实现后覆盖供应商前缀的属性设置; 例如:

.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属性。

参考文献:

供应商前缀列表(Meyerweb.com)。