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

4

2 回答 2

203

这些是相关渲染引擎（-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-gapcolumn-fill

参考：

于 2013-08-06T14:33:20.530 回答
57

什么是 -moz- 和 -webkit-？

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

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

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

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

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

让我们进一步说，微软作为一个实验决定实施提议的网格。目前，Microsoft 无法确定该规范不会更改。因此，它没有将网格添加到其 CSS 中，而是添加了-ms-grid.

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

截至 2016 年的更新

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

正如本词汇表中提到的关于 Mozilla 对Vendor Prefixon的看法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;
}
于 2016-07-29T05:34:45.270 回答