Tobias Scheible Cyber Security & IT-Forensik Dozent
Kampf dem Vendor-Prefix

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.

Sonntag, 03. Mai 2015
1 Kommentar

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.

Über Tobias Scheible

Tobias Scheible

Hallo, mein Name ist Tobias Scheible. Ich bin begeisterter Informatiker und Sicherheitsforscher mit den Schwerpunkten Cyber Security und IT-Forensik. Mein Wissen teile ich gerne anhand von Fachartikeln hier in meinem Blog und in meinem Fachbuch. Als Referent halte ich Vorträge und Workshops für Verbände und Unternehmen u. a. auch offene Veranstaltungen für den VDI und die IHK.

Kommentare

Tino am 6. Februar 2017 um 22:47 Uhr

Solange das Ganze mit Firefox Funktioniert ist mir das alle mal recht;-)

Schreibe einen Kommentar!

Hilfe zum Kommentieren und Hiweise

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, eine Gefährdung anderer Besucher darstellen oder keinen sinvollen Inhalt beinhalten, 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 damit ich direkt Kontakt aufnehmen kann. 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>

Ihre E-Mailadresse wird nicht veröffentlicht. Mit dem Absenden anerkennen Sie die Datenschutzhinweis des Blogs.