Hauptmenü

Untermenü

CSS3 - Überblick

1. Schöne neue Welt

So hieß einst der bekannte dystopische Roman des Schriftstellers Aldous Huxley, in dem er eine grauselige Welt beschrieb, in der die Menschen von Konsum, Sex und Drogen gesteuert wurden. Gut, das scheint heute schon Realität geworden zu sein, aber was zum Teufel hat das mit CSS3 zu tun?

Nun ja, mit Sex erst mal gar nichts, mit Konsum nur indirekt aber verdammt viel mit Drogen. Und zwar mit denen, die sich unsere Designer einwerfen, wenn sie von den neuen Möglichkeiten erfahren, die uns CSS3 bietet. Darum psst, nicht weiter erzählen, denn sonst werden wir uns bald mit all den verrückten Ideen herumschlagen, die ein Kreativengehirn auf Dope so ausspuckt.

2. Die Browserunterstützung

Ist genau wie bei HTML5 so lala. Der eine kann dies, der andere das, manche gar nichts (wer wohl?), und oft muss man sich mit browsereigenen Eigenschaften herumschlagen. Für einen groben Überblick liste ich mal die prozentuale Unterstützung auf.

Browser Unterstützung
IE8 Internet Explorer 8 (*) 8,3%
IE9 Internet Explorer 9 55,6%
IE10 Internet Explorer 10 94,4%
Safari Safari 5.1 (PC) 97,2%
Firefox Firefox 18.0 97,2%
Opera Opera 12.x 88,9%
Chrome Google Chrome 23.0 91,7%

* Wehe es fragt einer nach dem IE6/7!

Ein Hinweis

Da irgendwelche Vollhonks bei Google der Meinung waren, ihrem Browser wegen jedem Mäusefurz eine neue Vollversion zu verpassen und leider Mozilla nachzog, gebe ich bei der Unterstützung nur die Versionen an, die zum Zeitpunkt der Veröffentlichung dieses Tutorials gültig waren.

Das sieht ja eigentlich sehr gut aus. Mal abgesehen davon, dass die HTML5-Platzhirsche Chrome und Opera hier einige Schwächen zeigen. Wer sich vorab einen genauen Überblick verschaffen will, dem empfehle ich diese Seite. Ansonsten werde ich bei einzelnen Punkten noch mal dezidiert auf die Browserunterstützung hinweisen.

Noch ein Hinweis

Meiner Meinung nach sind obige Angaben ein wenig verwirrend, denn sie spiegeln nicht das tatsächliche Können der einzelnen Browser wider. So werden der Firefox und Safari höher gewichtet als der Internet Explorer 10. Der kann nur eine neue Eigenschaft nicht (dazu später mehr), während die anderen beiden zwar irgendwie alles können, nur nicht perfekt. Und darum sage ich jetzt einfach mal Folgendes. Der Meinung nach beste Browser in puncto CSS3 ist doch tatsächlich der IE 10 (*). Auch wenn mir diese Worte nur schwer über die Lippen kommen.

* Mittlerweile ist auch der IE 11 erschienen. Aber den habe ich derzeit noch nicht auf der Platte (Stand Dezember 2013).

3. Wie geht man mit älteren Browsern um?

Ganz einfach, ignorieren. Denn den Benutzern oller Schrömmelgurken geht dadurch keine Funktionalität verloren, es sieht halt nur nicht so schön aus. So solltet ihr zumindest bei euren eigenen Projekten verfahren. Anders sieht es natürlich aus, wenn ihr das für einen Kunden macht.

Denn

... auch hier gelten dieselben Tipps, die ich euch schon bei HTML5 gegeben habe. Immer schön darauf hinweisen, wie die derzeitige Situation ist, wer was nicht kann und vor allem erzählt von den immensen Kosten, die eine designsichere Umsetzung für ältere Browser mit sich bringt. Und immer daran denken:

"Den ältesten Browser in einer Firma hat immer der Chef. Immer!" [Quelle: meine Wenigkeit]

Zu den Zusatzkosten

Je nach Design wird sich der Aufwand abhängig von der Wahl der älteren Browsern verdoppeln bis verdreifachen. Besonders die ach so beliebten "runden" Ecken und Schatten sind ein gern genommenes Gestaltungselement, wo man fürchterlich viel mit Bildern herumschnippeln muss.

Wie sieht der Trend aus?

Ganz einfach, immer mehr Webauftritte nutzen exzessiv CSS3 und kümmern sich nicht mehr um die alten Browser-Gurken, die leider immer noch viel zu zahlreich im Einsatz sind. Bei denen muss es halt nur noch funktionieren und nicht mehr hübsch aussehen. Außerdem geht es immer mehr in Richtung mobile Endgeräte und da ist CSS3 ein Muss.

weiter zum nächsten Abschnitt