Wie man mit Vendor Präfixen umgeht

Wenn Sie CSS schreiben, müssen Sie fast sicher Vendor-Präfixe für einige Teile des Codes verwenden, den Sie schreiben, um die beste Browserunterstützung zu gewährleisten. Ob es sich um Präfix-Eigenschaften wie -prefix-transform, Präfix-At-Regeln wie @-prefix-keyframes oder Präfix-Werte wie -prefix-linear-gradient handelt, es ist eine tägliche Aufgabe für CSS-Autoren.

Es ist nicht nur Teil unserer Arbeit, es ist auch leicht, etwas zu vermasseln. Ich habe kürzlich eine Reihe von großen Websites durchgesehen, speziell nach kleinen, pedantischen CSS3-Fehlern gesucht, und ich konnte auf jeder Website, die ich mir angesehen habe, einen finden.

Wie schreiben wir also CSS, damit wir immer die richtigen Präfixe verwenden?

Manuell Author – Verweisen Sie auf CSS3Please

Manuelle Autorenschaft bedeutet, dass das CSS, das Ihre Websites in der Produktion („live“) verwenden, die CSS-Datei ist, die Sie selbst in einem Texteditor bearbeiten. Wenn Sie diesen Weg gehen, müssen Sie alle richtigen Vendor-Präfixe direkt in dieser bearbeiteten Datei selbst einfügen. Etwas mühsam und fehleranfällig, wie ich finde, aber wahrscheinlich das Szenario für die meisten Websites der Welt.

Wenn dies bei Ihnen der Fall ist, ist Ihre beste Wahl, auf eine aktuelle Ressource wie CSS3 please! zu verweisen. Sie können die Werte direkt auf dieser Website bearbeiten und sie kopieren und in Ihre eigenen Stylesheets einfügen.

Wenn Sie dies tun, liegt **die Verantwortung bei Ihnen**, die Dinge aktuell zu halten. Präfixe sind nicht mehr so ​​flüchtig wie früher, aber ein Blick alle paar Monate ist auf jeden Fall angebracht.

Manuell Author – Nicht präfixen – Lassen Sie -prefix-free es clientseitig tun

Sie schreiben das CSS immer noch manuell, aber Sie verwenden nur die unpräfixierten Eigenschaften/Werte/At-Regeln. -prefix-free ist ein kleines JavaScript, das läuft, Ihren gesamten CSS-Code durchsieht und neue Stile mit den richtigen Präfixen zur Seite hinzufügt, falls erforderlich, um diese Stile funktionsfähig zu machen.

Dies ist ein heiliger Krieg. Es macht CSS-Dateien kleiner! Ja, aber es birgt das Risiko von Flackern von nicht-CSS3-elementen! Es erfordert JavaScript für Stile, das Überkreuzen der Ströme! Ja, aber es sind nur 2k! Es ist progressive enhancement vom Feinsten, da es aufhört zu präfixen, wenn Browser es nicht mehr benötigen!

Sie entscheiden.

Es ist auch erwähnenswert, dass die .css()-Methode von jQuery einiges an Präfixen für Sie erledigt.

$("body").css({
  
  // Will NOT prefix
  "background": "linear-gradient(#ccc, #666)",

  // Doesn't need to, so won't
  "box-shadow": "inset 0 0 5px black",

  // WILL prefix
  "transform" : "rotate(5deg)"

});

Ich bin normalerweise kein Fan davon, CSS über JavaScript anzuwenden, aber es ist gut zu wissen, da es immer Ausnahmen von den Regeln gibt.

Manuell Author – Korrigieren mit Prefixr

Wenn Sie die Präfixe nicht manuell authorn möchten, Ihr Workflow aber letztendlich manuell authornendes CSS bereitstellt, könnten Sie Ihr CSS vor dem Deployment durch Prefixr laufen lassen. Es parst im Grunde Ihr CSS, findet Dinge, die einen Präfix benötigen, und macht es für Sie.

Es ist sehr clever, da Sie kein CSS benötigen, das speziell ohne Präfixe auskommt (wie es -prefix-free erfordert). Wenn Sie zum Beispiel gerade einen der erforderlichen drei Präfixe vermissen, erkennt es das und fügt nur den fehlenden hinzu.

Es gibt auch Möglichkeiten, es in Workflows zu integrieren, über die Kommandozeile oder beliebte Texteditoren.

Preprocess – Mixins verwenden

Einer der Hauptgründe für die Verwendung von CSS-Präprozessoren ist die Hilfe bei Vendor-Präfixen.

Wenn Sie Sass verwenden, haben Compass oder Bourbon robuste Sets von CSS3-Mixins für Sie.

Wenn Sie LESS verwenden, habe ich ein Set davon oder Sie könnten sich diese Zusammenfassung ansehen, die einige andere vergleicht.

Manuell Author – Nicht präfixen – Post-Prozess mit Autoprefixer

Dies ist eine wirklich großartige Methode dafür. Alles ist in diesem Artikel beschrieben. Im Grunde vergessen Sie einfach das Präfixen und dieser Build-Schritt fügt die Präfixe für Sie hinzu, basierend auf den neuesten und besten Informationen von CanIUse.

„Don’ts“

Ein Fehler, den ich manchmal sehe, ist, dass Leute einfach alle wichtigen Präfixe für jede CSS3-Eigenschaft verwenden. Es scheint, dass sie eine generische Mixin haben, durch die sie alles laufen lassen, was die Präfixe aufklebt. Wenn Sie so etwas wie -o-border-radius gesehen haben, meine ich das. Das hat es nie gegeben und wird es nie in Ihr CSS geben müssen.

Ein weiterer Fehler ist, CSS veralten zu lassen. Wie ich bereits erwähnte, lohnt es sich, CSS, das älter als ein paar Monate ist, anzusehen, um sicherzustellen, dass es auf dem neuesten Stand ist. Wenn Sie etwas Veraltetes auf dieser Website sehen, lassen Sie es mich bitte wissen, und ich werde es sofort aktualisieren.