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

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

Bei der Einführung von CCS3 wurden verschiedene Browser zu verschiedenen Zeitpunkten von verschiedenen angeregten Eigenschaften getroffen. Die Webkit-Browser (Safari und Chrome) waren zum Beispiel die ersten, die einige Eigenschaften im Animationsstil wie Transformation und Übergang einführten. Durch die Verwendung von herstellerpräfixierten Eigenschaften konnten Webdesigner diese neuen Funktionen in ihrer Arbeit nutzen und sie in den Browsern sehen, die sie sofort unterstützten, anstatt auf einen anderen Browserhersteller warten zu müssen!

Aus Sicht eines Front-End-Webentwicklers werden Browser-Präfixe verwendet, um neue CSS-Funktionen zu einer Website hinzuzufügen, während sie sich sicher sind, 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), lauten:

Android:
-webkit-
Chrom:
-webkit-
Feuerfuchs:
-moz-
Internet Explorer:
-Frau-
iOS:
-webkit-
Oper:
-O-
Safari:
-webkit-

Um eine brandneue CSS-Stileigenschaft zu verwenden, verwenden Sie in den meisten Fällen die Standard-CSS-Eigenschaft und fügen das Präfix für jeden Browser hinzu. Die vorangestellten 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 den Befehl

Übergang

Eigenschaft wie unten gezeigt:

-webkit- Übergang: alle 4s Leichtigkeit; -moz- Übergang: alle 4s Leichtigkeit; -Frau- Übergang: alle 4s Leichtigkeit; -O- Übergang: alle 4s Leichtigkeit;Übergang: alle 4s Leichtigkeit;

Hinweis: Denken Sie daran, dass einige Browser für bestimmte Eigenschaften eine andere Syntax haben als andere. Nehmen Sie daher nicht an, dass die Browser-Präfix-Version einer Eigenschaft genau der Standardeigenschaft entspricht. Um beispielsweise einen CSS-Farbverlauf zu erstellen, verwenden Sie die

linearer Gradient
Eigentum. 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 vorangestellte Eigenschaft verwenden

-Webkit-Gradient
. Firefox verwendet auch andere Werte als die Standardwerte.

Der Grund, warum Sie Ihre Deklaration immer mit der normalen, nicht mit einem Präfix versehenen Version der CSS-Eigenschaft 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 Regeln, wenn die Spezifität gleich ist. Ein Browser würde also die Anbieterversion einer Regel lesen und verwenden, wenn er die normale Regel nicht unterstützt. Wenn dies jedoch der Fall ist, wird die Anbieterversion mit überschrieben die tatsächliche CSS-Regel.

Herstellerpräfixe sind kein Hack

Als zum ersten Mal Herstellerpräfixe eingeführt wurden, fragten sich viele Web-Profis, ob sie ein Hack oder eine Verschiebung zu den dunklen Tagen waren, in denen der Code einer Website gefälscht wurde, um verschiedene Browser zu unterstützen. Diese Seite wird am besten in IE angezeigt "messages). 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 Box-Modell-Hack Fehler beim Parsen des

stimme-familie
oder wie Browser Backslashes analysieren (

). 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 hat nichts mit dem Stil der Sprachfamilie zu tun. Zum Glück sind diese beiden veralteten Browser solche, mit denen wir uns heute nicht beschäftigen.

Ein Herstellerpräfix ist kein Hack, weil es der Spezifikation ermöglicht, Regeln für die Implementierung einer Eigenschaft festzulegen, während Browserhersteller die Möglichkeit haben, eine Eigenschaft auf eine andere Weise zu implementieren, ohne alles andere zu beschädigen. Darüber hinaus arbeiten diese Präfixe mit CSS-Eigenschaften wird schließlich ein Teil der Spezifikation sein . Wir fügen einfach etwas 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 der Browser vollständig unterstützt wird.

Möchten Sie wissen, was der Browser für eine bestimmte Funktion unterstützt? Die Website CanIUse.com ist eine wunderbare 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 nur vorübergehend

Ja, es kann sich als störend und wiederholend anfühlen, wenn Sie die Eigenschaften zwei bis fünf Mal schreiben müssen, damit sie in allen Browsern funktionieren. Erst vor einigen Jahren mussten Sie zum Schreiben einer abgerundeten Ecke an einer Box Folgendes 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;Grenzradius: 10px 5px;
Jetzt, da Browser diese Funktion vollständig unterstützen, benötigen Sie nur noch die standardisierte Version:

Grenzradius: 10px 5px;
Chrome unterstützt die CSS3-Eigenschaft seit Version 5.0, Firefox fügte es in Version 4.0 hinzu, Safari fügte es in 5.0 hinzu, Opera in 10.5, iOS in 4.0 und Android in 2.1. Sogar Internet Explorer 9 unterstützt es ohne Präfix (und IE 8 und niedriger unterstützte es nicht mit oder ohne Präfix).

Denken Sie daran, dass Browser sich 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 stehen. Am Ende 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, sodass Sie einen anderen Fehler finden müssen, um usw. auszunutzen.