Anbieterpräfix: Warum brauchen wir ein Browser-Engine-Präfix?

Was ist das Lieferantenpräfix?

Anbieterpräfix – Browser-Engine-Präfixe sind kleine Zeichenfolgen, die vor CSS-Eigenschaften platziert werden, um sicherzustellen, dass solche Eigenschaften nur unter einer bestimmten Browser-Rendering-Engine erkannt und wirksam werden können. Google Chrome und Safari verwenden die Rendering-Engine WebKit, Firefox die Gecko-Engine, Internet Explorer die Trident-Engine und Opera nutzte früher die Presto-Engine, wechselte aber später zur WebKit-Engine. Eine Browser-Engine implementiert im Allgemeinen keine CSS-Eigenschaften, die mit Präfixen anderer Engines markiert sind. Da jedoch mobile Browser auf Basis von WebKit sehr beliebt sind, haben Browser wie Firefox in ihren mobilen Versionen auch einige CSS-Eigenschaften implementiert, die mit WebKit-Engine-Präfixen markiert sind.

Was sind die Browser-Engine-Präfixe (Vendor-Präfix)?

-moz- /* Firefox und andere Browser, die die Mozilla-Browser-Engine verwenden*/
-webkit- /* Safari, Google Chrome und andere Browser, die die Webkit-Engine verwenden*/
-o- /* Opera-Browser (früher) */
-ms- /* Internet Explorer (nicht unbedingt) */

Warum brauchen wir ein Anbieterpräfix?

Diese Browser-Engine-Präfixe (Vendor Prefix) werden hauptsächlich von verschiedenen Browsern verwendet, um mit neuen CSS3-Eigenschaftsfunktionen zu experimentieren oder diese zu testen. Es lässt sich in den folgenden drei Punkten zusammenfassen:

• Experimentieren Sie mit CSS-Eigenschaften, die noch nicht standardisiert sind – und möglicherweise nie standardisiert werden.
• Experimentelle Implementierung neuer Standard-CSS3-Eigenschaften
• Personalisierte Implementierung gleichwertiger Semantik für einige neue Eigenschaften in CSS3

Nicht alle dieser Präfixe sind erforderlich, aber es schadet normalerweise nicht, sie hinzuzufügen. Denken Sie nur daran, die Version ohne Präfix in die letzte Zeile zu setzen:

-moz-Randradius: 10px;
-Webkit-Randradius: 10px;
-o-Randradius: 10px;
Rahmenradius: 10px;

Einige neue CSS3-Eigenschaften sind seit langem experimentell und einige Browser verwenden für diese Eigenschaften bereits keine Präfixe mehr. Die Border-Radius-Eigenschaft ist ein sehr typisches Beispiel. Die neuesten Browser unterstützen das Border-Radius-Attribut ohne Präfix.

CSS3-Eigenschaften, die Vendor-Präfixe erfordern

Zu den wichtigsten Eigenschaften, denen ein Herstellerpräfix hinzugefügt werden muss, gehören:

• @Schlüsselbilder
• Bewegungs- und Transformationseigenschaften (Übergangseigenschaft, Übergangsdauer, Übergangszeitfunktion, Übergangsverzögerung)
• Animationseigenschaften (Animationsname, Animationsdauer, Animationszeitfunktion, Animationsverzögerung)
• Randradius
• Kastenschatten
• Rückseitensichtbarkeit
• Spalteneigenschaften
• Flex-Eigenschaft
• perspektivische Eigenschaft

Die vollständige Liste endet hier nicht und wird weiter wachsen.

Verwendung des Vendor-Präfixes

Wenn Herstellerpräfixe benötigt werden, ist es am besten, die Präfixe an den Anfang und die Standardpräfixe ans Ende zu setzen. Zum Beispiel:

/* Einfache Eigenschaften */
.meineKlasse {
	-webkit-animation-name: Einblenden;
	-moz-animation-name: Einblenden;
	-o-Animationsname: Einblenden;
	-ms-animation-name: Einblenden;
	Animationsname: FadeIn; /* setze den ohne Präfix ans Ende*/
}
/* Komplexe Attribut-Keyframes */
@-webkit-keyframes fadeIn {
	0 % { Deckkraft: 0; } 100 % { Deckkraft: 0; }
}
@-moz-keyframes fadeIn {
	0 % { Deckkraft: 0; } 100 % { Deckkraft: 0; }
}
@-o-keyframes fadeIn {
	0 % { Deckkraft: 0; } 100 % { Deckkraft: 0; }
}
@-ms-keyframes fadeIn {
	0 % { Deckkraft: 0; } 100 % { Deckkraft: 0; }
}
/* Die ohne Präfix ans Ende setzen*/
@keyframes fadeIn {
	0 % { Deckkraft: 0; } 100 % { Deckkraft: 0; }
}

Internet Explorer

Internet Explorer 9 unterstützt viele (aber nicht alle) der neuen Eigenschaften in CSS3. Beispielsweise können Sie die Border-Radius-Eigenschaft im Internet Explorer auch ohne das Vendor-Präfix verwenden.

IE6 bis IE8 unterstützen CSS3 nicht. Leider gibt es immer noch viele Benutzer, die diese Browser mit niedriger Version verwenden. Stellen Sie also sicher, dass Ihr Website-Design auch ohne CSS3-Unterstützung ordnungsgemäß angezeigt werden kann. Für einige Eigenschaften wie „Border-Radius“, „Linear-Gradient“ und „Box-Shadow“ können Sie CSS3Pie verwenden. Dabei handelt es sich um eine kleine Datei, die Sie im Stammverzeichnis Ihrer Website ablegen und dafür sorgen, dass Ihre Seiten diese Eigenschaften in IE6 und IE8 unterstützen.