Klar, die Spezifikation(en) zu CSS3 ist noch nicht abgeschlossen. Auch sind wir noch weit von einer flächendeckenden Implementierung durch die Browserhersteller entfernt. Trotzdem spricht nichts dagegen (hier und da) als Webdesigner den nächsten Schritt zu gehen.
Ich beantworte daher die Frage eines Lesers hier im Blog.
Was ist der Vorteil von CSS3 – Welche Browser unterstützen das zur Zeit?
Vorteile von CSS3
Gegenüber was? Wir sprechen eher über Neuerungen und Weiterentwicklungen, die uns zum einen das Leben als Webdesigner erleichtern, aber v.a. auch neue Möglichkeiten eröffnen. Im Prinzip stehen die Vorteile im Vordergrund (gibt es Nachteile?), die sich aus erweiterten Gestaltungsmöglichkeiten (Bsp. @font-face, Spaltensatz etc.) und Möglichkeiten hin zu effizienterem Code (Bsp. border-radius) zusammensetzen.
Browserunterstützung
Diese Frage kann man sich am besten durch übersichtliche Checklisten beantworten lassen. So z.B. Web Designers‘ Browser Support Checklist oder etwas gezielter bei When can I use…
Man kann sich auch fragen What Does “Support” Mean?
Es kommt v.a noch darauf an
Wie oben erwähnt spricht, trotz der noch nicht vollzogenen Etablierung von CSS3, nichts gegen einen Einsatz bereits heute verfügbarer Techniken. Ob man heute schon CSS3 Eigenschaften verwendet, hängt von den eigenen Anforderungen und Ansprüchen sowie konkreten Kundenanforderungen ab. Auch hier muss wieder das Beispiel der abgerundeten Ecken (border-radius) herhalten.
Möchte ich runde Ecken haben, schreibe ich eine Zeile mehr Code und zack wird alles abgerundet. Das spart im Vergleich zu bisher viele Zeilen Code und Schneidearbeiten in Photoshop. Aber natürlich muss man heute noch Abstriche machen. Bei vielen Webseiten ist es so, dass die meisten Besucher nichts davon sehen werden. Auch hier ist der Browsersupport noch nicht flächendecken vorhanden. Man hat dann im Wesentlichen zwei Möglichkeiten:
Verzicht auf das Feature bzw. Stilelement: Ich lasse es ganz bleiben. Durch den Verzicht bekommen dann alle Besucher das Gleiche zu sehen. Aber muss das sein? Ich denke nein.
Der Vergleich zu Fernsehgeräten ist nicht von ganz weit hergeholt.
Some viewers still have black-and-white televisions. Broadcasting only in black-andwhite—the “lowest common denominator” approach—ensures a shared experience but benefits no one. Excluding the black-and-white television owners—the “you must be this tall to ride” approach—provides no benefit either.
Verzichtet die Unterhaltungselektronikindustrie auf Dolby-Surround oder digitales Fernsehen, nur weil es noch alte Geräte gibt, die damit nichts anfangen können. Nein. Natürlich nicht, aber eben ohne den Zuschauern etwas Wesentliches vorzuenthalten. Originäres Bild und Ton sind trotzdem für alle verfügbar.
Progressive Enhancement: Warum also nicht neue Techniken heute schon nutzen, wenn sie zur Verfügung stehen? Hier setzt das Prinzip des Progressive Enhancement an. Um das zu verdeutlichen, wieder zurück zum einfachen Beispiel der abgerundeten Ecken.
Als Webdesigner entscheidet man sich dafür, die Ecken von Boxen abgerundet darzustellen. Also schreibt man eine zusätzliche Zeile CSS-Code. Browser, die das bereits heute unterstützen, rendern entsprechend Boxen mit abgerundeten Ecken. Andere, die es noch nicht unterstützen, ignorieren die Anweisung und stellen das Ganze eckig dar. Das tut niemandem weh. Keiner verpasst was, außer vielleicht einen fancy Effekt bzw. Stilelement.
Aber: Nun könnte es sein, dass ich allen meinen Besuchern Boxen mit abgerundeten Ecken präsentieren möchte.Oder ein Kunde besteht ganz einfach darauf, weil er dem Prinzip des Progressive Enhancement nicht folgen möchte.
Tja dann gibt es auch Mittel und Wege. Mehr Schmerzen natürlich auch. Es sind dann ein paar mehr Zeilen Code und Bildbearbeitung notwendig. Oder man versucht das Ganze mit Hilfe von Javascript zu realisieren. Wobei sich mit JS auch keine 100% Abdeckung erreichen lässt (manche Nutzer haben JS deaktiviert). Aber runde Ecken sind zugegeben ein relativ kleines Problem. Im Falle vom Spaltensatz sprechen wir z.B. dann von noch weitreichenderen Fragestellungen und Workarounds.
Ähnlich verhält es sich auch mit anderen neuen Möglichkeiten in Richtung CSS3. Im Endeffekt muss man sich selbst entscheiden, wieviel einem der größere Aufwand wert ist, oder aber auch, die Anforderungen der Kunden beantworten diese Frage von ganz alleine.
Weitere Links zum Thema
- Progressive Enhancement: Die Zeit ist gekommen
- We’re Ready for CSS3, but are we Ready for CSS3?
- CSS3 + Progressive Enhancement = Smart Design
- CSS3 – Vor dem Endspurt? (eigene Einschätzung im Webzeugkoffer)
Man kann aber nach wie vor noch nicht daran glauben, in naher Zukunft schon problemlos die neuen Techniken anwenden zu können. Schon vor drei Jahren und länger war CSS3 ein konkretes Thema. Wie dieser bereits über drei Jahre alte Artikel stellvertretend zeigt: CSS3 – Alles wird gut?
Allerdings sind wir von der Einführung vermutlich noch weit entfernt und auch dann ist noch ein gutes Stück zu gehen bis die breite Anwendung sinnvoll möglich wird. Vielleicht sehe ich den kommenden Weg aber auch einfach zu pessimistisch. In diesem Punkt würde ich mich jedenfalls gerne irren.Dirk Jesse im Webkrauts-Artikel
Markus L sagt:
Hey, ich find dein denken total super und das ganze wird durch deine bsp unterstützt. Ich freu mich wenn ich hier über die „finale“ version etwas lesen darf …. irgendwann 😉
lg
markus
18. Februar 2010 — 8:44
shortee sagt:
schöner artikel. ich bin auch für progressive enhancement.
und gerade hier in deutschland sind wir mit den browsern recht gut dran. im durchschnitt haben wir ca 60% kompatibilität (welche sich bei vielen relevanten zielgruppen eher noch erhöht) für spielereien wie box-shadow oder @font-face. der rest verpasst halt nicht viel und bekommt trotzdem ein solides layout.
19. Februar 2010 — 1:36
Dieter sagt:
Sehr schöner und treffender Artikel!
Auch ich bin ein Freund von CSS3 und Progressive Enhancement. Setze neben border-radius auch gerne box-shadow schon ein.
Und: Opera wird mit der nächsten Version 10.5 ebenfalls diese CSS3-Funktionalitäten unterstützen und selbst Microsoft hat für den IE 9 CSS3-Support in Aussicht gestellt.
Also ganz so pessimistisch wie Dirk Jesse würde ich es inzwischen nicht mehr sehen. Es bewegt sich was in Sachen Browsersupport von CSS3, auch wenn für meinen Geschmack noch zu langsam.
21. Februar 2010 — 20:01
Dirk sagt:
Na schau her. Ich bin ja ganz stolz, dass hier mein alter Webkrauts-Artikel nochmal zitiert wird.
@Dieter
In meinem damaligen Beitrag ging es in erster Linie um layout-relevante Verbesserungen wie das Spaltenmodul oder ein flexibleres Box-Modell. Nichts davon ist bisher einsatzbereit. Mein Beitrag ist von 2006, heute haben wir 2010. Ich denke, der Pessimismus war und ist gerechtfertigt.
Was CSS3 aktuell bringt, ist vorrangig etwas visuelles „Bling Bling“. Runde Ecken – ja, die können demnächst vielleicht alle Browser. Mehrfache Hintergründe, Gradients, Box-Shadow … hier sind teilweise die Syntax noch grundverschieden, genauso wie die Qualität der Ergebnisse. Klar kann man diese Sachen jetzt schon einsetzen – aber nur, wenn man deren Fehlen auch verschmerzen kann.
Der Entwicklungsaufwand von CSS-Layouts definiert sich nicht nach der Anzahl der Runden Ecken, daher sehe ich nach wie vor nur einen relativ geringen „VORTEIL“ von CSS3, was schade ist.
24. Februar 2010 — 18:04
wo kann ich sagt:
„Natürlich nicht, aber eben ohne den Zuschauern etwas Wesentliches vorzuenthalten“ – danke! *g*
16. März 2010 — 20:24
Kevin Lieser sagt:
Bei mir ist es so, dass ich CSS3 Elemente gut und gerne nutze, diese aber nicht zum Bau des Grundlegenden, geplanten Layouts nutze.
Im nachhinein stilvolle, feine, weiche Schatten an die H1 Tags übergeben oder den Menüpunkten eine minimale Rundung verleihen finde ich via CSS3 wesentlich besser gelöst. Alles andere wäre im Prinzip wieder zusammengeschusterter „kram“. Über CSS finde ich es einfach „nativer“ und „richtiger“.
Browser wie die IE die z.B. keinen border-radius unterstützen, haben in diesen kleinen Feinheiten eben „Pech gehabt“.
Anders sieht es natürlich aus, wenn solche Effekte/Elemente Grundlegend im Layout verankert sind und somit für alle User/Browser sichtbar sein sollten.
Grüße!
13. Dezember 2010 — 18:33
CSS 3 rulez sagt:
Die Möglichkeiten von CSS 3 erfüllen endlich die Träume von jedem, der etwas im Web baut. Schaut mal mit aktuellem Firefox oder Chrome auf diesen Musik Blog, da sieht man in praktischer Anwendung, was alles möglich ist. Runde Ecken, Transparenzeffekte, Farbverläufe, Schatten, CSS3-Buttons. Eine wahre Freude!
29. Januar 2011 — 17:58