CSS3 für Hintergründe
Als CSS 3 damals eingeführt wurde, stellte ich euch relativ früh die ersten CSS3 Backgrounds bzw. Muster für Websites vor. Das war und ist vor allem deshalb interessant, weil CSS3 eben nicht erst, wie beispielsweise Bilder, extra geladen werden muss, sondern sich bereits im normalen Code befindet. Statt also eine extra Datei zu laden, wird der Background einfach per CSS3 gerendert und das spart, zumindest in der Theorie, wieder Anfragen und Ressourcen, verbessert also unter Umständen auch die Performance. Doch trotz CSS3 sind hübsche Backgrounds mit Streifen und Mustern, in CSS alles andere als einfach umzusetzen. Deshalb werden diese auch häufig gar nicht eingesetzt bzw. ist vielen nicht einmal bewusst, das Muster auch mit CSS generiert werden können.
CSS3 Muster und Backgrounds
Inzwischen gibt es aber viele Bastler, die sich die unterschiedlichsten Formen und Muster in CSS3 zurechtgebogen haben. Auf der folgenden Website werden diese nun seit einiger Zeit gesammelt und zumindest die Standards sind auch alle bereits vorhanden. Also Streifen, Kästchen, Treppen und vieles mehr. Für den normalen Wordpress Blog reicht das vollkommen aus und auf der Website lässt sich nach dem Klick nicht nur das CSS3 Muster kopieren, es lässt sich auch live im Browser verändern und anpassen. So entsteht schnell eine eigene Version, aber auch Farben können simpel und schnell verändert werden. Insgesamt eine nette Idee, um gelungene CSS3 Backgrounds zusammenzufassen und zu sortieren.
Performance ist wieder so eine Sache
Nun gibt es bei den CSS3 Mustern aber einen Haken, denn sie sind wieder pure Theorie. Theoretisch werden sie direkt gerendert, was einen Aufruf spart, beispielsweise wenn stattdessen ein Bild genutzt wird. Doch theoretisch ist das alles immer ganz toll, in der Praxis aber dann nicht. Oft sind kleine und optimierte Bilder wesentlich schneller geladen und dazu noch deutlich hübscher. Außerdem landen sie schnell im Cache, müssen also nur ein einziges mal aufgerufen werden, während CSS3 immer wieder vom Browser interpretiert werden muss. Es ist ein bisschen wie mit der Style.css vs. Inline CSS, was ich neulich angesprochen hatte. Theorie und Praxis unterscheiden sich schlussendlich eben doch gewaltig und was sinnvoll klingt, ist nicht immer praktikabel. Aber interessant sind CSS3 Backgrounds ganz sicher und einen Test sind sie ebenfalls wert, denn es kommt ja immer auch auf den Einzelfall an.
