CSS 中的 -webkit- 和 -moz- 等供应商前缀是什么？为什么使用它们？

了解供应商前缀：-moz- 和 -webkit-

当遇到如下列出的不熟悉的 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 前缀由 Chrome 和 Safari 使用，而 -moz 前缀适用于 Firefox。

供应商前缀的用途

供应商前缀支持新的或专有的 CSS 的实现在 W3C 正式标准化之前的功能。尽管浏览器实现之间可能存在不一致，但这允许尽早采用。

最佳实践

建议首先指定供应商前缀的属性，然后指定无前缀的版本。这可确保浏览器完全支持后，无前缀属性会覆盖供应商前缀设置。

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

应用示例

在提供的 CSS 示例中，属性指定与多列相关layouts:

• -webkit-column-count: 指定 Webkit 浏览器的多列布局中的列数。
• -webkit -column-gap: 定义 Webkit 的列之间的间距浏览器。
• -webkit-column-fill: 控制内容如何在 Webkit 浏览器的列中分布。

使用 -moz 将类似的属性应用于 Firefox前缀。

其他资源

• [CSS多列布局模块](https://www.w3.org/TR/css3-multicol/)
• ['捍卫供应商前缀Meyer](https://meyerweb.com/eric/thoughts/2008/05/13/defense-of-vendor-prefixes/)
• [供应商前缀列表迈耶](https://meyerweb.com/eric/thoughts/2008/05/13/defense-of-vendor-prefixes/)

以上是CSS 中的 -webkit- 和 -moz- 等供应商前缀是什么？为什么使用它们？的详细内容。更多信息请关注PHP中文网其他相关文章！