-webkit-css, -moz-css … Schöne neue Vendor Prefixes

Donnerstag, 12. April 2012 um 16:37 von Frank Schad in Webdesign

Schon vor geraumer Zeit haben die Browserhersteller damit begonnen, neue CSS-Eigenschaften, die noch nicht standardisiert wurden, vorab mit Herstellerpräfixen (Vendor Prefixes) zu implementieren. Wir alle kennen den -webkit-border-radius, -moz-transform oder -o-text-overflow. Im Prinzip eine schöne Sache: Vendor Prefixes haben den Entwicklungsprozess von CSS enorm beschleunigt und damit die kreativen Möglichkeiten im Webdesign auf eine völlig neue Stufe gehoben. Bereits 2010 hat Eric Meyer in einem Artikel auf A List Apart auf die Vorteile der Herstellerpräfixe hingewiesen.

Doch das Ganze hat auch eine Kehrseite:

CSS-Features mit einem Vendor Prefix sind nicht valide und werden es niemals sein! Solche Eigenschaften sind kein CSS, auch kein CSS3, wie bereits Lea Verou in ihrem Artikel »Every Time You Call a Proprietary Feature ›CSS3‹, a Kitten Dies« (ebenfalls auf A List Apart) ausgeführt hat.

Zudem verleiten Vendor Prefixes die Hersteller zur Implementierung proprietärer Features, die wahrscheinlich niemals zu Webstandards werden. Dazu gehören z. B. alle Eigenschaften, die sich auf Apple-Software (wie etwa Mobile Safari auf iOS oder Dashboard-Widgets) beziehen:

-webkit-tap-highlight-color
-webkit-touch-callout
-webkit-overflow-scrolling
-webkit-box-reflect
-webkit-dashboard-region
-epub-text-combine

Als Webdesigner ist es nicht immer ganz einfach, solche proprietären Eigenschaften von experimentellen Implementierungen zukünftiger Standards zu unterscheiden. Da hilft nur googeln: "touch-callout" site:w3.org.

Ein weiteres Problem ist im Zuge des Erfolgs von Apples iSpielzeugen entstanden: Webkit ist mittlerweile die dominante Rendering Engine auf mobilen Endgeräten (iOS, Android), sodass viele Webentwickler ihre Seiten nur noch für diese Rendering Engine optimieren, indem sie ausschließlich das -webkit-Präfix verwenden. Die Folge: Andere Browser können auf diese Weise erstellte Websites nicht korrekt darstellen, selbst wenn sie über das entsprechende Feature – aber eben mit einem anderen Präfix – verfügen.

Diese Nachlässigkeit der Webdesigner könne dem Web einen ähnlichen Schaden zufügen wie einst der Internet Explorer 6, warnt der ehemalige Netscape-Entwickler Daniel Glazman, einer der Vorsitzenden der CSS-Arbeitsgruppe im W3C, in seinem Blog. Es drohe die Gefahr, dass aus einer einzelnen Implementierung ein De-facto-Standard und der eigentliche Standardisierungsprozess untergraben wird. Es gibt bereits öffentliche Aufrufe, diesen Misstand zu »fixen«.

Zwischenbilanz: Herstellerpräfixe sind eine schicke Sache, bieten sie doch erstaunlich viele neue Möglichkeiten im Webdesign und sorgen gleichzeitig dafür, dass ein bestimmtes Feature in einem anderen Browser nicht zu Darstellungsfehlern führt. Auch proprietäte Features (wie z. B. -webkit-box-reflect oder -webkit-overflow-scrolling) können durchaus verwendet werden, um etwa die Darstellung auf einem iPhone zu optimieren, solange man den Prinzipien des Progressive Enhancement folgt.

Wenn es jedoch um ein experimentelles Feature geht, das von verschiedenen Browsern mit dem jeweiligen Präfix unterstützt und vielleicht sogar demnächst standardisiert wird, sollte man alle Varianten (inklusive der »offiziellen« ohne Präfix) verwenden, z. B.:

-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-ms-transform: rotate(4deg);
-o-transform: rotate(4deg);
transform: rotate(4deg);

Eine Liste aller CSS-Eigenschaften mit Präfix finden Sie hier.

Das führt uns jedoch zum Hauptproblem von Vendor Prefixes in der Praxis: Jede Eigenschaft muss vier- oder fünfmal notiert und im Falle einer Änderung auch genauso oft angepasst werden. Das kostet enorm viel Zeit, es entstehen enorme Redundanzen, und der Code wird unnötig aufgebläht (natürlich auch im Hinblick auf die Dateigröße).

Hier gibt es eine Reihe ganz verschiedener Lösungsansätze:

1. Sie verwenden LESS, eine Technologie, die die Standard-CSS-Syntax um zusätzliche Features erweitert. Damit können z. B. Variablen angelegt und CSS-Klassen verschachtelt werden. Die fertige LESS-Datei wird dann z. B. mit dieser App zu einer »normalen«, standardkonformen CSS-Datei kompiliert. Auf diese Weise ist es auch möglich, Eigenschaften mit allen benötigten Herstellerpräfixen automatisch erzeugen zu lassen. »If you’re still building websites without LESS, you’re an idiot.«

2. Sie binden die freie JavaScript-Bibliothek -prefix-free von Lea Verou in Ihre Website ein. Diese Bibliothek ermöglicht es Ihnen, in Ihrem CSS-Code nur noch die »offiziellen« CSS-Eigenschaften ohne Präfix zu verwenden. Wenn ein Browser ein bestimmtes Präfix benötigt, wird es dynamisch hinzugefügt.

Tags: CSS , CSS3 , Vendor Prefix

Kommentare

Hinterlasse einen Kommentar: