Kampf dem Vendor-Prefix
An der automatischen Worttrennung hyphens lässt sich die Verwendung von Vendor-Prefixes gut demonstrieren. Mit dem folgenden Befehl wird die automatische Worttrennung aktiviert:
hyphens: auto;
Da dieser Befehl aber nicht direkt von den Webbrowsern unterstützt wird, müssen die entsprechenden herstellerspezifischen Vendor-Prefixes hinzugefügt werden:
-webkit-hyphens: auto; /* Safari und Chrome */ -moz-hyphens: auto; /* Firefox */ -ms-hyphens: auto; /* Internet Explorer */ -o-hyphens: auto; /* Opera */
Aber dadurch unterstützen noch lange nicht alle Webbrowser diese Funktion. In diesem Fall funktioniert –webkit- nur im Safari Browser und nicht im Chrome Browser. Laut der Seite Can I Use unterstützen ca. 36% aller Webbrowser die Hyphens-Funktion nur mit Vendor-Prefix. Und das, obwohl die automatische Worttrennung bereits im April 2011 durch das W3C vorgeschlagen wurde. Dieses Beispiel zeigt, wie lange man sich mit diesem zusätzlichen CSS-Code rumschlagen muss. Schließlich sind es anstatt des „normalen“ Befehls fünf Zeilen anstatt nur einer Zeile. Aber zum Glück gibt es Lösungen, wodurch die Vendor-Prefixes ignoriert werden können.
SASS-Lösungen
Wird SASS eingesetzt, stehen diverse Möglichkeiten zur Verfügung. Von kleinen einfachen Lösungen über Module bis hin zu Erweiterungen.
JavaScript-Lösungen
Eine sehr komfortable Lösung, vor allem wenn ältere Projekte oder fremde Projekte geändert werden, ist die JavaScript Lösung -prefix-free von Lea Verou. Einmal eingebunden, werden die CSS-Dateien analysiert und abhängig vom verwendeten Browser entsprechende Vendor-Prefixes eingefügt. Auf der offiziellen Projektwebsite gibt es eine hübsche Livedemo, mit dem das Script vorab getestet werden kann. Durch die komplette Automatisierung und einfache Handhabung setze ich -prefix-free in jedem neuen Projekt ein.
