Verwenden Sie ausschließlich Webkit-Präfixe?

Sie haben zweifellos über das Herstellerpräfix gelesen Web-Entwicklungsdrama der Woche. Wenn nicht, sind die W3C-Mailinglisten in Brand geraten, seit es diskutiert wurde (und im Wesentlichen angekündigt wurde), dass Microsoft, Opera und Firefox damit beginnen werden adoptieren und Eigenschaften, die dem Webkit vorangestellt werden. Einer der Gründe für diese Entscheidung ist, dass wir Entwickler beim Codieren unserer Stylesheets nicht verantwortlich sind. Wir wenden zu viele webkit-spezifische Eigenschaften an, ohne andere Browser zu berücksichtigen.

Als ich das hörte, dachte ich bei mir: Ist das wirklich wahr??


Huh Was ist los?

Um das heiße Drama nachzuholen, lesen Sie folgende Artikel:

  • Herstellerpräfixe Über den Süden
  • Jetzt sind Herstellerpräfixe ein Problem geworden
  • Das Problem der Herstellerpräfixe
  • Aufruf zu Maßnahmen bei Lieferantenpräfixen

Der grundlegende Aspekt besteht darin, dass Nicht-Webkit-Anbieter die Möglichkeit haben, das Web zu erkennen und zu gestalten -Webkit Präfix für eine Reihe von CSS3-Eigenschaften. Dies ist zum Teil darauf zurückzuführen, dass zu viele Entwickler faul waren, sich zu sehr auf Webkit stützten und ältere Projekte nicht aktualisieren (insbesondere bei mobilen Designs). Wenn diese konkurrierenden Browser dies sehen, haben sie keine Wahl; ihre Hände werden gezwungen.

Es ist eine Sache, zum Spaß mit nicht standardmäßigen, Webkit-spezifischen Eigenschaften herumzuspielen (z. B. -Webkit-Text-Strich); Wir haben sogar ähnliche Artikel auf Nettuts + gepostet. Es ist jedoch eine ganz andere Sache, wenn Entwickler zum Beispiel ausschließlich das Präfix von Webkit verwenden, wenn sie CSS-Gradienten oder -Übergänge anwenden.


Präfix-Dienste

Ein oft angekündigtes Ausrede Da alle CSS3-Eigenschaften nicht ordnungsgemäß vorangestellt werden, kann es sehr schwierig sein, zu verfolgen, welche Präfixe für eine bestimmte Eigenschaft erforderlich sind. Dies ist sicherlich richtig, aber unsere Community hat keine vielfältigen Lösungen bereitgestellt?

Kann ich benutzen

Um mit dem manuellen Nachschlageweg zu beginnen, ist CanIUse.com eine fantastische Referenz, wenn wir feststellen müssen, ob ein bestimmter Browser eine CSS3-Eigenschaft unterstützt. Wenn dies unterstützt wird, aber ein Präfix erforderlich ist, wird CanIUse Sie darüber informieren.

Es ist ein wichtiges Lesezeichen für alle Webentwickler (und ist nicht nur auf CSS beschränkt)..

Kompass

Compass ist ein Framework für Sass, das unter anderem das Präfix Ihrer CSS3-Eigenschaften automatisch übernimmt. Zum Beispiel, um Browser-übergreifend und sparsam umzusetzen Box-Sizing Auf eine Website mit CSS schreiben wir:

 * -webkit-box-size: border-box; -moz-box-dimensionierung: border-box; -ms-box-size: border-box; Box-Dimensionierung: Border-Box; 

Bei der Verwendung von Compass können Sie jedoch einfach ein Mixin hinzufügen, z.

 * @Einschließen der Boxgröße (Randfeld); 

Auf diese Weise müssen sich Designer nie darum kümmern, ob ein bestimmter Browser eine vorab Version einer neuen Eigenschaft bereitstellt oder nicht. Compass macht es für Sie.

Nettuts + Prefixr

Bei Nettuts + haben wir auch eine einfache Möglichkeit zum "automatischen Präfix" bereitgestellt. Verwenden Sie entweder die Website oder die zugehörige API in Ihrem bevorzugten Code-Editor, um Ihr Stylesheet automatisch zu filtern und alle CSS3-Eigenschaften zu aktualisieren, denen eine vorangestellte Version fehlt. Dies kann sogar in Ihr Build-Skript integriert werden, sodass Sie immer nur mit der offiziellen Syntax codieren.

Der Unterschied zwischen Prefixr und Compass besteht darin, dass ersterer keinen Präprozessor benötigt, wenn Sie es vorziehen, das gesamte CSS von Hand zu codieren. Fügen Sie Prefixr einfach ein Stylesheet hinzu, und den Rest erledigen Sie.

Präfix-frei

Lea Verou's Prefix-Free ist auch eine nette Lösung. Dies ist insofern einzigartig, als es sich um eine JavaScript-basierte Lösung handelt, die dynamisch bestimmt, welcher Browser verwendet wird, und dann dem Stylesheet die erforderlichen Präfixe zuweist. Importieren Sie einfach Präfix-frei, verwenden Sie die offizielle Syntax für die neuen CSS3-Eigenschaften, und Sie können sich um den Rest kümmern.

Einige sehen zwar die Tatsache an, dass JavaScript davon abhängt, dass es als Nachteil fungiert, ein erheblicher Vorteil dieser Methode besteht jedoch darin, dass Ihre Stylesheets sowohl kleiner als auch wartungsfreundlicher werden. Für Entwicklungszwecke ist es eine gute Wahl. Für die Produktion können Sie jedoch ein anderes Werkzeug in Betracht ziehen, da dies erhebliche Auswirkungen auf die Leistung haben kann.

CSS3 bitte

CSS3Please ist ein geschickter Dienst, der CSS zum Kopieren und Einfügen von Browsern bereitstellt. Passen Sie die Werte an Ihre Bedürfnisse an und Sie haben sofort ein Snippet, das alle anwendbaren Browser korrekt anspricht.


Verwenden Sie diese nicht??

Wenn Sie ein Präprozessor-Benutzer sind, der lieber eigene CSS3-Mixins erstellt, dann ist das fantastisch. Ansonsten verwenden einige von Ihnen diese Dienste nicht? Wenn ja, warum nicht? Es ist verständlich, dass Firefox und Microsoft das Webkit-Präfix für einige Eigenschaften trotz ihres besseren Urteils möglicherweise unterstützen müssen. Insbesondere bei älteren und kleineren Projekten ist es nicht immer toll, die Stylesheets bei Bedarf zu aktualisieren. Dies ist genau der Grund, warum sich die Präfixeigenschaften so lange hingelegt haben, obwohl Eigenschaften wie Grenzradius werden seit langem unpräzise unterstützt. Webkit möchte diese Websites nicht "brechen".

Also, was ist der Deal? Sind wir nicht verantwortlich??

Christian Heilmann hat ein Projekt namens Prefix the Web ins Leben gerufen; Entwickler werden aufgefordert, GitHub-Projekte so zu aktualisieren, dass sie alle erforderlichen Browser-Präfixe enthalten. Leider kann die Initiative zu spät sein. Was denkst du?