CSS什么是-moz-和-webkit-?

-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的教程中,我从来没有见过类似这些行的东西。 有人可以向我解释这些行或给我一个来源,我可以学习实现这样的线?

提前致谢!

这些是由相关渲染引擎( -webkit for Chrome,Safari; -moz for Firefox, -o用于Opera, -ms用于Internet Explorer)提供的供应商前缀属性。 通常在W3最终澄清/定义之前,它们被用来实现新的或专有的CSS特性。

这允许为每个单独的浏览器/渲染引擎设置属性,以便实现安全性之间的不一致。 随着时间的推移,前缀将会被删除(至less在理论上),因为在该浏览器中实现了该属性的前缀,最终版本。

为此,通常认为好的做法是首先指定供应商前缀的版本,然后指定非前缀的版本,以便非前缀属性在实现后会覆盖供应商的前缀属性设置; 例如:

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

参考文献:

  • CSS多列布局模块 。
  • “捍卫供应商前缀”(Meyerweb.com) 。
  • 供应商前缀列表(Meyerweb.com) 。

什么是-moz-和-webkit-?

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


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

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

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

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

我们还要说,微软作为一个实验决定实施提议的网格。 在这个时候,微软不能确定该规范是不会改变的。 因此,不添加网格到它的CSS,它增加了-ms-grid

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


更新截至2016年

作为这篇文章3年,重要的是要提到,现在大多数供应商确实知道这些前缀只是创build不必要的重复代码,并且你需要指定3个不同的CSS规则,以获得一个效果在所有浏览器中工作的情况是一个不需要的。

如本词汇表中提到的关于May 3, 2016May 3, 2016 Mozilla对Vendor Prefix的看法,

浏览器供应商现在正试图摆脱供应商前缀的实验function。 他们注意到Web开发人员在生产网站上使用它们,污染了全球空间,并使得劣势更加困难。

例如,就在几年前,为了在一个盒子上设置一个圆angular,你必须写:

 -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; 

但现在浏览器已经完全支持这个function,你真的只需要标准化的版本:

 border-radius: 10px 5px; 

为所有浏览器find正确的规则

虽然在所有浏览器上都没有通用的CSS规则标准,但是可以使用像caniuse.com这样的工具来检查所有主stream浏览器对规则的支持。

你也可以使用pleeease.io/play 。 Pleeease是一个可以轻松处理CSS的Node.js应用程序。 它简化了预处理器的使用,并将它们与最好的后处理器相结合。 它有助于创build干净的样式表,支持较旧的浏览器并提供更好的可维护性。

input:

 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; }