02.122011

Ende dem vorläufigen CSS3 Präfix-Wust

CSS3 hat einige wunderbare Vorteile, was die Gestaltungsvielfalt angeht, wie z.B. runde Ecken, Verläufe, Schatten und und und... Allerdings muss man aktuell und wahrscheinlich auch mittelfristig jedem Browser einzeln erklären, wie er diese Optiken darzustellen hat. Also Beispiel nenne ich die Präfixe für die CSS Eigenschaft "linear-gradient", die mit folgenden Präfixen bestückt werden kann:

  • -webkit-linear-gradient
  • -moz-linear-gradient
  • -o-linear-gradient
  • -ms-linear-gradient
  • ...
Erstellt man also einen Button ohne Grafiken und komplett in CSS, können die Eigenschaften einer CSS Klasse zu einem großen Code-Berg heranwachsen. Zusätzliche hat man innerhalb einer Klasse eine ziemliche Code Dopplung verursacht, wie man an folgendem Beispiel sieht.
.download {
   position: absolute;
   top: 1em;
   left: -1.5em;
   width: 6em;
   height: 6em;
   padding: 1em 0;
   background: #80A060;
   background-image: -webkit-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -moz-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -o-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -ms-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: linear-gradient(transparent, rgba(0,0,0,.3));
   color: white;
   line-height: 1;
   font-size: 140%;
   text-align: center;
   text-decoration: none;
   text-shadow: .08em .08em .2em rgba(0,0,0,.6);
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   -webkit-box-shadow: .1em .2em .4em -.2em black;
   -moz-box-shadow: .1em .2em .4em -.2em black;
   box-shadow: .1em .2em .4em -.2em black;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -ms-transform: rotate(15deg);
   -webkit-transform: rotate(15deg);
   -moz-transform: rotate(15deg);
   -o-transform: rotate(15deg);
   -ms-transform: rotate(15deg);
   transform: rotate(15deg);
   -webkit-animation: none;
   -moz-animation: none;
   animation: none;
}

Änderungen bei diesen Multibrowser-Eigenschaften müssen also mehrmals eingetragen werden und zusätzlich auch in jedem Browser einmal gecheckt werden. Diese Eigenschaften bringen natürlich enormen Mehrwert, blähen allerdings die CSS ungemein auf.

Die Lösung ist ein Javascript Code namens "prefixfree", geschrieben von Lea Verou. Es funktioniert relativ simpel: Alle browsereigenen Eigenschaften werden entfernt und man implementiert die 2kb große JS Datei (bestenfalls) direkt nach der CSS Datei. Daraufhin werden alle verlinkten und inline eingetragenen Styles geparsed und die nötigen browsereigenen Eigenschaften werden im Browser-Client "onthefly" angepasst - das wars. Sollten sich irgendwann einmal alle Browseranbieter einig sein und die Präfixe werden wieder entfernt, muss man lediglich das Script entfernen und alles funktioniert trotzdem weiter. Das oben genannte Stylesheet würde dann nur noch wie folgt aussehen:

 

.download {
   position: absolute;
   top: 1em;
   left: -1.5em;
   width: 6em;
   height: 6em;
   padding: 1em 0;
   background: #80A060;
   background-image: linear-gradient(transparent, rgba(0,0,0,.3));
   color: white;
   line-height: 1;
   font-size: 140%;
   text-align: center;
   text-decoration: none;
   text-shadow: .08em .08em .2em rgba(0,0,0,.6);
   border-radius: 50%;
   box-shadow: .1em .2em .4em -.2em black;
   box-sizing: border-box;
   transform: rotate(15deg);
   animation: none;
}

Somit ist der Code deutlich übersichtlicher geworden. Zu hoffen ist trotzdem noch, dass es langfristig eine einheitliche Lösung aller Browseranbieter gibt.

Lern uns kennen!