什么是-moz-和-webkit-? [英] What are -moz- and -webkit-?

查看:100
本文介绍了什么是-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的教程中,我从未见过像这些行这样的内容.有人可以向我解释这些内容,还是给我一个可以学习实现这些内容的资源?

I am a beginner at CSS and when I was looking at some CSS code the other day, I found these lines. In the tutorials I used to learn CSS, I have never seen anything like these lines. Could someone please explain these lines to me or give me a source where I could learn to implement lines like these?

推荐答案

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

These are the vendor-prefixed properties offered by the relevant rendering engines (-webkit for Chrome, Safari; -moz for Firefox, -o for Opera, -ms for Internet Explorer). Typically they're used to implement new, or proprietary CSS features, prior to final clarification/definition by the W3.

这允许针对每个单独的浏览器/渲染引擎设置特定的属性,以便安全地解决实现之间的不一致.随着时间的流逝,前缀(至少从理论上讲)将被删除,因为该属性的无前缀最终版本是在该浏览器中实现的.

This allows properties to be set specific to each individual browser/rendering engine in order for inconsistencies between implementations to be safely accounted for. The prefixes will, over time, be removed (at least in theory) as the unprefixed, the final version, of the property is implemented in that browser.

为此,通常最好的做法是先指定供应商前缀的版本,然后再指定非前缀版本,以使非前缀属性在实现后将覆盖卖方前缀的属性设置;例如:

To that end it's usually considered good practice to specify the vendor-prefixed version first and then the non-prefixed version, in order that the non-prefixed property will override the vendor-prefixed property-settings once it's implemented; for example:

.elementClass {
    -moz-border-radius: 2em;
    -ms-border-radius: 2em;
    -o-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
}

具体来说,要解决您所遇到的CSS问题,请引述以下几行:

Specifically, to address the CSS in your question, the lines you quote:

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

Specify the column-count, column-gap and column-fill properties for Webkit browsers and Firefox.

参考文献:

  • CSS Multi-column layout module.
  • 'In defence of Vendor Prefixes' (Meyerweb.com).
  • Vendor prefix lists (Meyerweb.com).

这篇关于什么是-moz-和-webkit-?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆