CSS Vendor Prefixes

Was sind sie und warum sollten Sie sie verwenden

CSS-Herstellerpräfixe, manchmal auch als CSS-Browserpräfixe bezeichnet, bieten Browsern die Möglichkeit, Unterstützung für neue CSS-Funktionen hinzuzufügen, bevor diese Funktionen in allen Browsern vollständig unterstützt werden. Dies kann während einer Art Test- und Experimentierphase erfolgen, in der der Browserhersteller genau festlegt, wie diese neuen CSS-Funktionen implementiert werden. Diese Präfixe wurden vor einigen Jahren mit dem Aufstieg von CSS3 sehr populär.

Als CCS3 zum ersten Mal eingeführt wurde, begannen einige aufgeregte Eigenschaften, zu unterschiedlichen Zeiten verschiedene Browser zu treffen. Zum Beispiel waren die Webkit-basierten Browser (Safari und Chrome) die ersten, die einige der Eigenschaften im Animationsstil einführten, wie Transformation und Übergang. Durch die Verwendung von Eigenschaften mit Herstellerpräfix konnten Webdesigner diese neuen Funktionen in ihrer Arbeit nutzen und sie auf den Browsern anzeigen lassen, die sie sofort unterstützten, anstatt darauf warten zu müssen, dass jeder andere Browserhersteller aufholt!

Gemeinsame Präfixe

Aus der Sicht eines Front-End-Webentwicklers werden Browser-Präfixe verwendet, um einer Site neue CSS-Funktionen hinzuzufügen, und Sie können sich darauf verlassen, dass die Browser diese Stile unterstützen. Dies kann besonders hilfreich sein, wenn verschiedene Browserhersteller Eigenschaften auf leicht unterschiedliche Weise oder mit einer anderen Syntax implementieren.

Die CSS-Browser-Präfixe, die Sie verwenden können (von denen jedes für einen anderen Browser spezifisch ist), sind:

  • Android: -webkit-
  • Chrome: -webkit-
  • Firefox: -moz-
  • Internet Explorer: -ms-
  • iOS: -webkit-
  • Opera: -o-
  • Safari: -webkit-

In den meisten Fällen verwenden Sie zur Verwendung einer brandneuen CSS-Stileigenschaft die Standard-CSS-Eigenschaft und fügen das Präfix für jeden Browser hinzu. Die vorangestellten Versionen stehen immer an erster Stelle (in einer von Ihnen bevorzugten Reihenfolge), während die normale CSS-Eigenschaft an letzter Stelle steht. Wenn Sie beispielsweise Ihrem Dokument einen CSS3-Übergang hinzufügen möchten, verwenden Sie die Übergangseigenschaft wie folgt:

-Webkit-Übergang: alle 4s leicht;
-moz-Übergang: alle 4 s leicht;
-ms-Übergang: alle 4 s leicht;
-o-Übergang: alle 4 s Leichtigkeit;
Übergang: alle 4 s leicht;

Denken Sie daran, dass einige Browser für bestimmte Eigenschaften eine andere Syntax haben als andere. Gehen Sie daher nicht davon aus, dass die vom Browser vorangestellte Version einer Eigenschaft genau der Standardeigenschaft entspricht. Um beispielsweise einen CSS-Verlauf zu erstellen, verwenden Sie die Eigenschaft linearer Verlauf. Firefox, Opera und moderne Versionen von Chrome und Safari verwenden diese Eigenschaft mit dem entsprechenden Präfix, während frühere Versionen von Chrome und Safari die Präfixeigenschaft -webkit-gradient verwenden.

Außerdem verwendet Firefox andere Werte als die Standardwerte.

Der Grund dafür, dass Sie Ihre Deklaration immer mit der normalen, nicht vorangestellten Version der CSS-Eigenschaft beenden, besteht darin, dass ein Browser diese Regel verwendet, wenn er diese Regel unterstützt. Denken Sie daran, wie CSS gelesen wird. Die späteren Regeln haben Vorrang vor früheren Regeln, wenn die Spezifität gleich ist. Ein Browser würde daher die Herstellerversion einer Regel lesen und diese verwenden, wenn sie die normale nicht unterstützt. Wenn dies jedoch der Fall ist, wird die Herstellerversion mit überschrieben die eigentliche CSS-Regel.

Herstellerpräfixe sind kein Hack

Als die Herstellerpräfixe zum ersten Mal eingeführt wurden, fragten sich viele Webprofis, ob dies ein Hack oder eine Verschiebung in die dunklen Tage war, als der Code einer Website abgefragt wurde, um verschiedene Browser zu unterstützen. Präfixe von CSS-Anbietern sind jedoch keine Hacks, und Sie sollten keine Bedenken haben, sie in Ihrer Arbeit zu verwenden.

Ein CSS-Hack nutzt Fehler in der Implementierung eines anderen Elements oder einer anderen Eigenschaft aus, damit eine andere Eigenschaft ordnungsgemäß funktioniert. Beispielsweise hat der Box-Modell-Hack Fehler beim Parsen der Sprachfamilie oder beim Parsen von Backslashes durch Browser ausgenutzt. Diese Hacks wurden jedoch verwendet, um das Problem des Unterschieds zwischen der Handhabung des Box-Modells durch Internet Explorer 5.5 und der Interpretation durch Netscape zu beheben, und haben nichts mit dem Stil der Sprachfamilie zu tun. Zum Glück müssen wir uns mit diesen beiden veralteten Browsern heutzutage nicht mehr befassen.

Ein Herstellerpräfix ist kein Hack, da es der Spezifikation ermöglicht, Regeln für die Implementierung einer Eigenschaft festzulegen, während Browserhersteller gleichzeitig die Möglichkeit haben, eine Eigenschaft auf andere Weise zu implementieren, ohne alles andere zu beschädigen. Darüber hinaus funktionieren diese Präfixe mit CSS-Eigenschaften, die schließlich Teil der Spezifikation sein werden. Wir fügen lediglich einen Code hinzu, um frühzeitig auf die Immobilie zugreifen zu können. Dies ist ein weiterer Grund, warum Sie die CSS-Regel mit der normalen Eigenschaft ohne Präfix beenden. Auf diese Weise können Sie die vorangestellten Versionen löschen, sobald die vollständige Browserunterstützung erreicht ist.

Möchten Sie wissen, wie die Browserunterstützung für eine bestimmte Funktion lautet? Die Website CanIUse.com ist eine hervorragende Ressource, um diese Informationen zu sammeln und Ihnen mitzuteilen, welche Browser und welche Versionen dieser Browser derzeit eine Funktion unterstützen.

Herstellerpräfixe sind ärgerlich, aber vorübergehend

Ja, es kann ärgerlich und wiederholend sein, die Eigenschaften 2 bis 5 Mal schreiben zu müssen, damit sie in allen Browsern funktionieren, aber es ist eine vorübergehende Situation. Zum Beispiel musste man vor ein paar Jahren, um eine abgerundete Ecke auf ein Kästchen zu setzen, schreiben:

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
Randradius: 10px 5px;

Nachdem die Browser diese Funktion nun vollständig unterstützen, benötigen Sie nur noch die standardisierte Version:

Randradius: 10px 5px;

Chrome unterstützt die CSS3-Eigenschaft seit Version 5.0, Firefox hat sie in Version 4.0, Safari in Version 5.0, Opera in Version 10.5, iOS in Version 4.0 und Android in Version 2.1 hinzugefügt. Sogar Internet Explorer 9 unterstützt es ohne Präfix (und IE 8 und niedriger unterstützen es nicht mit oder ohne Präfix).

Denken Sie daran, dass sich Browser ständig ändern werden und kreative Ansätze zur Unterstützung älterer Browser erforderlich sind, es sei denn, Sie planen, Webseiten zu erstellen, die Jahre hinter den modernsten Methoden zurückliegen. Letztendlich ist das Schreiben von Browser-Präfixen viel einfacher als das Auffinden und Ausnutzen von Fehlern, die höchstwahrscheinlich in einer zukünftigen Version behoben werden, und erfordert, dass Sie einen anderen Fehler zum Ausnutzen finden und so weiter.