Question

-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的教程中，我从未见过像这些行一样的东西。有人可以向我解释一下这些内容，或者给我一个我可以学习实现这些行的来源吗？

Answer 1

这些是相关呈现引擎提供的供应商前缀属性（适用于Chrome，Safari的-webkit;适用于Firefox的-moz，适用于Opera的-o，适用于互联网的-ms资源管理器）。通常，在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属性。

参考文献：

Answer 2

什么是-moz-和-webkit - ？

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

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

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

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

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

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

供应商前缀类型＆＃34;这是Microsoft的解释   正在进行的提案。＆＃34;因此，如果网格的最终定义是   不同的是，微软可以不加破坏地添加新的CSS属性网格   依赖于-ms-grid的页面。

2016年更新

这篇文章已有3年历史了，重要提一下，现在大多数供应商都明白这些前缀只是创建了不必要的重复代码，而且你需要这样做的情况指定3个不同的CSS规则，以便在所有浏览器中使用一个效果是不需要的。

正如this词汇表中提到的关于Vendor Prefix上May 3, 2016的Mozilla视图，

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

什么是-moz-和-webkit-？

2 个答案: