Was sind Herstellerpräfixe wie -webkit- und -moz- in CSS und warum werden sie verwendet?

Anbieterpräfixe verstehen: -moz- und -webkit-

Anfänger wundern sich vielleicht, wenn sie auf unbekannte CSS-Zeilen wie die unten aufgeführten stoßen ihre Bedeutung.

-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;

Diese Linien repräsentieren Vom Hersteller vorangestellte Eigenschaften, die nur für bestimmte Rendering-Engines gelten. -webkit-Präfixe werden von Chrome und Safari verwendet, während -moz-Präfixe für Firefox gelten.

Zweck von Herstellerpräfixen

Herstellerpräfixe ermöglichen die Implementierung von neuem oder proprietärem CSS Funktionen vor ihrer offiziellen Standardisierung durch das W3C. Dies ermöglicht eine frühzeitige Einführung trotz möglicher Inkonsistenzen zwischen Browser-Implementierungen.

Best Practice

Es wird empfohlen, zuerst vom Hersteller vorgegebene Eigenschaften anzugeben, gefolgt von Versionen ohne Präfix. Dadurch wird sichergestellt, dass die Eigenschaft ohne Präfix die Einstellungen des Herstellers mit Präfix überschreibt, sobald sie vom Browser vollständig unterstützt wird.

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

Anwendungsbeispiel

Im bereitgestellten CSS-Beispiel die Eigenschaften Die angegebenen Werte beziehen sich auf Mehrspalten layouts:

• -webkit-column-count: Gibt die Anzahl der Spalten in einem mehrspaltigen Layout für Webkit-Browser an.
• -webkit -column-gap: Definiert den Abstand zwischen Spalten für Webkit Browser.
• -webkit-column-fill: Steuert, wie Inhalte innerhalb von Spalten für Webkit-Browser verteilt werden.

Ähnliche Eigenschaften werden mit -moz auf Firefox angewendet Präfixe.

Zusätzlich Ressourcen

• [CSS-Modul für mehrspaltiges Layout](https://www.w3.org/TR/css3-multicol/)
• ['Zur Verteidigung von Anbieterpräfixe' von Meyer](https://meyerweb.com/eric/thoughts/2008/05/13/defense-of-vendor-prefixes/)
• [Anbieterpräfixlisten von Meyer](https://meyerweb. com/eric/thoughts/2008/05/13/defense-of-vendor-prefixes/)

Das obige ist der detaillierte Inhalt vonWas sind Herstellerpräfixe wie -webkit- und -moz- in CSS und warum werden sie verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!