Was sind CSS-Anbieter- oder Browser-Präfixe?

CSS-Anbieterpräfixe, manchmal auch als or known bekannt CSS Browser-Präfixe sind eine Möglichkeit für Browserhersteller, Unterstützung für neue CSS-Funktionen bevor diese Funktionen in allen Browsern vollständig unterstützt werden. Dies kann während einer Art Test- und Experimentierzeit erfolgen, in der der Browserhersteller genau bestimmt, wie diese neuen CSS-Funktionen implementiert werden. Diese Präfixe wurden mit dem Aufkommen von. sehr beliebt CSS3 vor einigen Jahren.

Ursprünge der Lieferantenpräfixe

Als CCS3 zum ersten Mal eingeführt wurde, trafen verschiedene Browser zu unterschiedlichen Zeiten eine Reihe von aufregenden Eigenschaften ein. Zum Beispiel waren die Webkit-basierten Browser (Safari und Chrome) die ersten, die einige der Eigenschaften im Animationsstil wie Transformation und Übergang eingeführt haben. Durch die Verwendung von Anbieter-Präfix Eigenschaften, Webdesigner konnten diese neuen Funktionen in ihrer Arbeit nutzen und in den Browsern sehen die sie sofort unterstützt haben, anstatt darauf warten zu müssen, dass jeder andere Browser-Hersteller sie erwischt oben!

Gemeinsame Präfixe

Aus der Sicht eines Front-End-Webentwicklers werden Browser-Präfixe verwendet, um einer Website neue CSS-Funktionen hinzuzufügen und gleichzeitig sicher zu sein, 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 (jeweils spezifisch für einen anderen Browser), sind:

• Android:

  -webkit-

• Chrom:

  -webkit-

• Feuerfuchs:

  -moz-

• Internet Explorer:

  -Frau-

• iOS:

  -webkit-

• Oper:

  -Ö-

• Safari:

  -webkit-

Hinzufügen eines Präfixes

Um eine brandneue CSS-Stileigenschaft zu verwenden, nehmen Sie in den meisten Fällen die Standard-CSS-Eigenschaft und fügen das Präfix für jeden Browser hinzu. Die mit Präfix versehenen Versionen würden immer an erster Stelle stehen (in beliebiger 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 unten gezeigt:

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

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

Außerdem verwendet Firefox andere Werte als die Standardwerte.

Der Grund dafür, dass Sie Ihre Deklaration immer mit der normalen Version der CSS-Eigenschaft ohne Präfix beenden, besteht darin, dass ein Browser diese Regel verwendet, wenn er die Regel unterstützt. Denken Sie daran, wie CSS gelesen wird. Die späteren Regeln haben Vorrang vor früheren, wenn die Spezifität gleich ist, sodass ein Browser die Herstellerversion von a lesen würde Regel und verwenden Sie diese, wenn sie die normale Version nicht unterstützt, aber sobald sie dies tut, wird die Herstellerversion mit dem tatsächlichen CSS überschrieben Regel.

Herstellerpräfixe sind kein Hack

Als Anbieter-Präfixe zum ersten Mal eingeführt wurden, fragten sich viele Web-Profis, ob sie ein Hack oder ein Wechseln Sie zurück in die dunklen Tage des Forkens des Codes einer Website, um verschiedene Browser zu unterstützen (denken Sie daran, dass "Diese Seite wird am besten im IE angezeigt" Botschaft). Die 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 korrekt funktioniert. Zum Beispiel nutzte der Hack des Box-Modells Fehler beim Parsen der Voice-Familie oder beim Parsen von Backslashes durch Browser aus. Aber diese Hacks wurden verwendet, um das Problem des Unterschieds zwischen der Art und Weise, wie Internet Explorer 5.5 das Box-Modell handhabte, zu beheben Netscape interpretiert und haben nichts mit dem Stil der Stimmfamilie zu tun. Glücklicherweise sind diese beiden veralteten Browser diejenigen, mit denen wir uns heutzutage nicht mehr beschäftigen müssen.

Ein Vendor-Präfix ist kein Hack, da es der Spezifikation ermöglicht, Regeln für die Implementierung einer Eigenschaft aufzustellen. und gleichzeitig Browserherstellern ermöglichen, eine Eigenschaft auf andere Weise zu implementieren, ohne alles zu zerstören sonst. Darüber hinaus arbeiten diese Präfixe mit CSS-Eigenschaften, die wird irgendwann Teil der Spezifikation sein. Wir fügen lediglich einen Code hinzu, um frühzeitig Zugriff auf die Unterkunft zu erhalten. 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.

Anbieterpräfixe sind ärgerlich, aber vorübergehend

Ja, es kann sich ärgerlich und repetitiv anfühlen, die Eigenschaften 2-5 Mal schreiben zu müssen, damit sie in allen Browsern funktionieren, aber es ist eine vorübergehende Situation. Um zum Beispiel vor ein paar Jahren eine abgerundete Ecke auf einer Schachtel zu setzen, musste man schreiben:

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-unten-rechts-radius: 10px;
-webkit-border-unten-links-radius: 5px;
Randradius: 10px 5px; 

Aber jetzt, da Browser diese Funktion vollständig unterstützen, benötigen Sie wirklich nur die standardisierte Version:

Randradius: 10px 5px; 

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

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 dies Webseiten erstellen die den modernsten Methoden Jahre hinterherhinken. Letztendlich ist das Schreiben von Browser-Präfixen viel einfacher, als Fehler zu finden und auszunutzen, die höchstwahrscheinlich in einer zukünftigen Version behoben werden, sodass Sie einen anderen Fehler zum Ausnutzen finden müssen und so weiter.