Web Development Blog
Contao, Wordpress, PHP, JavaScript, CSS, HTML & Co.
Kampf dem Vendor-Prefix

Datum: Sonntag, 03. Mai 2015

Autor: Tobias Scheible

Kommentar(e): 0 Kommentare

Kategorie: CSS

Tags: Browser, CSS, hyphens

Kampf dem Vendor-Prefix

Mit CSS3 wurden schicke neue Funktionen eingeführt und die Geschwindigkeit, mit der weitere Eigenschaften veröffentlicht werden, hat sich deutlich gesteigert. So führen quasi Browserhersteller neue Funktionen im Alleingang ein. Wenn sie gut sind, übernehmen sie andere und dadurch werden sie dann irgendwann standardisiert. Diese schöne neue Welt hat nur den Haken, dass neue Befehle ein Vendor-Prefix benötigen. Aber zum Glück gibt es Techniken, damit man die Befehle nicht mehrfach schreiben muss.

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.

  • Artikel teilen:

Kommentare

Es wurde noch kein Kommentar abgegeben.

Schreibe einen Kommentar!

Hilfe zum Kommentieren

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen oder eine Gefährdung anderer Besucher darstellen, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und sie haben die Möglichkeit, ein Avatar-Bild zu verwenden. Dazu müssen Sie mit Ihrer E-Mail Adresse bei Gravatar angemeldet sein. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

nach oben
Schatten