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 瀏覽器的欄位中分佈。

其他資源

• [CSS多列版面模組](https://www.w3.org/TR/css3-multicol/)
• ['捍衛供應商前綴Meyer](https://meyerweb.com/eric/thoughts/200 8/05/13/defense-of-vendor-prefixes/)
• [供應商前綴清單邁耶](https://meyerweb.com/eric/thoughts/2008/05/13/defense- of-vendor-prefixes/)

以上是CSS 中的 -webkit- 和 -moz- 等供應商前綴是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！