CSS3-prefix-free

Endlich ist der Browserkrieg beendet, zumindest was die Optimierung mit Browserspezifischen Prefixattributen angeht, und das durch Include von -prefix-free.

CSS3-prefix-free

Das Problem mit der Webseitenoptimierung für Browser zieht sich ja nun schon seit Jahren Jahrzehnten hin. Da beschliessen die Browserhersteller ein neues und cooles CSS Attribut, versehen das Attribut mit eigenen Browserprefixen wie zum Beispiel -ms für Microsofts Internetexpolorer, -o für Opera, -webkit für Chrome und Safari und -moz für den Firefox. Dann kommt das W3C Konsortium daher und findet das ebenfalls eine super Erfindung und beschliesst genau das selbe Attribut in den Standard mit aufzunehmen.


Am Ende hat man dann zum Beispiel für Hintergrundfarbverläufe in den CSS Dateien folgendes stehen:


background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-8 */


Wenn man auf diese Art und Weise alle Attribute Browserspezifisch definieren will bläht das die CSS Dateien enorm auf, die Ladezeiten erhöhen sich, und am Ende blickt man evtl selber nicht mehr durch. Dank -prefix-free ist damit jetzt Schluss, denn die gerade mal 2KB große Javascript Datei erzeugt die Browserspezifischen Anweisungen on the Fly speziell für den gerade eingesetzen Browser.


Dabei werden alle CSS Anweisungen abgearbeitet die mit link und style eingebunden worden sind, sowie alle Inline-CSS-Anweisungen. Mit einem Plugin werden sogar alle Attribute behandelt, die mit jQuery.css() gesetzt werden. @import Anweisungen in CSS Dateien können derzeit nicht behandelt werden. Von der Einbindung via @import wird ohnehin abgeraten (siehe Links), da die so eingebunden Dateien immer nur nacheinander und nicht parallel geladen werden, wie das bei der Einbindung via link der Fall ist.