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.