什么是-moz-和-webkit-？

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

这些是相关渲染引擎提供的以供应商为前缀的属性(-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;

指定column-count,column-gap并column-fill为WebKit浏览器和Firefox的性能.

参考文献:

• CSS多列布局模块.
• '为供应商前缀辩护'(Meyerweb.com).
• 供应商前缀列表(Meyerweb.com).

Answer 2

什么是-moz-和-webkit-？

首先是CSS属性-webkit-,-moz-,-ms-或者-o-被称为供应商前缀.

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

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

最初,供应商前缀的重点是允许浏览器制造商开始支持实验性CSS声明.

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

让我们进一步说微软作为一个实验决定实现建议的网格.此时,微软无法确定规范是否会发生变化.因此,它不是将网格添加到CSS中,而是添加-ms-grid.

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

2016年更新

正如这篇文章3年前一样,重要的是要提到现在大多数供应商都明白这些前缀只是创建了不必要的重复代码,并且你需要指定3个不同的CSS规则以在所有浏览器中使用一个效果的情况是不受欢迎的.

正如提到这个词汇有关Mozilla的看法上Vendor Prefix上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.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;
}