CSS3 im Hier und Jetzt

Mit der folgenden kurzen Präsentation haben wir den Vortrag eröffnet.  

Das momentan übliche CSS entstammt aus den CSS-Spezifikationen 1 und 2. CSS Level 1 bekam im Dezember 1996 den Status einer W3C-Empfehlung, CSS Level 2 folgte im Mai 1998. CSS Level 2 wurde dann noch einmal überarbeitet und im August 2002 CSS Level 2 Revision 1 veröffentlicht, besser bekannt als CSS2.1. Die aktuell neueste Version der Spezifikation stammt vom 12. April 2011 und kann unter w3.org/TR/CSS21/ abgerufen werden.

In den letzten Jahren liest man im Web des öfteren Zeilen wie „Ich freu' mich schon drauf, wenn CSS3 endlich fertig ist und ich es einsetzen kann". Für die Autoren solcher Zeilen gibt es eine gute und eine schlechte Nachricht:

  • Die schlechte: Die Arbeit an CSS Level 3 wurde bereits im April 2000 begonnen und es wird noch viele Jahre dauern, bis CSS3 wirklich fertig ist.

  • Die gute: Sie müssen nicht warten, bis CSS3 fertig ist. Sie können bereits heute anfangen, mit CSS3 zu arbeiten.

Kein Scherz. Ihr könnt CSS3 heute schon auf Ihren Webseiten benutzen. Zumindest Teile davon, und es wird euch stundenlange Grafikbasteleien ersparen. Die Browser bestimmen was geht, und die meisten sind bei CSS3 durchaus brauchbar.

CSS3 besteht aus vielen verschiedenen Modulen

Zunächst einmal ist CSS3 nicht ein einziger Standard, der am Tag X für die Öffentlichkeit freigegeben wird. CSS3 besteht aus zahlreichen Modulen mit unterschiedlichen Prioritäten und unterschiedlichem Entwicklungstempo. Einige Module wie Selectors oder CSS Color sind so gut wie fertig, an anderen wie CSS Backgrounds and Borders wird fieberhaft gearbeitet, während wieder andere wie CSS Lists in eine Art Dornröschenschlaf gefallen zu sein scheinen.

Einen aktuellen Überblick über den Stand der verschiedenen Module bekommen Sie zum Beispiel auf der Seite css3.info/modules.

Jeder so wie er kann: »Progressive Enhancement«

Um CSS3 auf euren Webseiten einzusetzen, müsst ihr nicht warten, bis alle Module fertig sind. Noch besser: Um CSS3 einzusetzen, müsst ihr nicht einmal warten, bis ein bestimmtes Modul wirklich fertig ist. Die Browser bestimmen wie gesagt was geht.

Spätestens beim Einsatz von CSS3 sollte man sich vom Papierdenken lösen und akzeptieren, dass eine Webseite nicht in jedem Browser gleich aussehen muss. Dabei gilt es zwei Grundsätze zu berücksichtigen:

  • Alte Browser verstehen die neuen CSS3-Eigenschaften nicht und stellen die Webseiten ohne dar. Die Inhalte der Webseiten sollten aber in jedem Browser zugänglich bleiben.

  • Moderne Browser zeigen mit CSS3 gestaltete Webseiten in ihrer vollen Pracht. Das ist kein Bug, das ist ein Feature.

CSS-Guru Dan Cederholm zeigt diese unter dem Begriff "Progressive Enhancement" bekannt gewordene Vorgehensweise auf einer Beispielsite mit einem etwas längeren aber durchaus treffenden Domain-Namen:

dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

In jedem Browser sieht man zunächst die Antwort auf die im Domain-Namen gestellte rhethorische Frage, und die lautet natürlich "Nope". Nein. Webseiten müssen nicht in jedem Browser gleich aussehen und sich nicht in jedem Browser gleich verhalten.

In einem Internet Explorer 6 sieht Cederholms Beispielseite so aus und sie ändert sich auch nach Hovern und Klicken mit der Maus nicht.

Cederholm IE6 CSS3
Die Website im IE6

Für IE6-Benutzer ist das alles. Der Inhalt ist zugänglich und IE6-Benutzer vermissen auch nichts. Sie wissen ja nicht, was in modernen Browsern alles passiert, wenn der Benutzer den Mauszeiger bewegt und auf das Wort „Nope" klickt: Sternenhimmel, abgerundete Ecken, transparente Hintergründe und eine Grußbotschaft an die Benutzer moderner Browser.

Alles mit CSS3 und ein paar Grafiken erstellt. Schrittweise Verbesserung. Progressive Enhancement: Schreibt das HTML und CSS so, dass die Seiten in allen Browsern okay aussehen und der Inhalt zugänglich ist. Auf diesem Fundament baut ihr auf und verbessert die Gestaltung für neuere Browser.

Cederholm CSS3 moderne Browser
Die Website in einem modernen Browser

Wofür man CSS3 heute benutzen kann, und wofür besser nicht

Natürlich gibt es auf einer Website Dinge, bei denen man besser nicht experimentieren sollte. Beim Layout zum Beispiel. Die CSS3 Module für mehrspaltige Layouts sind noch lange nicht fertig und die Browser verstehen davon entsprechend wenig. Float-basierte, mehrspaltige Layouts werden uns also noch eine ganze Weile begleiten.

Andererseits gibt es visuelle Verfeinerungen wie abgerundete Ecken oder Hover-Effekte, die das Aussehen und die Bedienung der Site verbessern, die aber für das Funktionieren der Website nicht wirklich wichtig sind. Ein Browser, der die Verfeinerungen nicht versteht, ignoriert sie einfach, aber er stellt die Seiten trotzdem fehlerfrei dar.

Viele Dinge, die bisher nur mit Hilfe von Grafiken gelöst werden konnten, gehen heute mit CSS3 einfacher. Einige davon lernt ihr gleich kennen:

  • Abgerundete Ecken mit border-radius

  • Schatteneffekte mit box-shadow und text-shadow

  • Transparenzeffekte mit opacity, RGBA und HSLA

  • Lineare Farbverläufe für background

Der Browser-Grenzverlauf beim Verstehen dieser Eigenschaften verläuft ungefähr wie folgt:

  • Aktuelle Versionen Mozilla Firefox, Apple Safari, Opera, Google Chrome und deren mobile Ableger verstehen die CSS3-Eigenschaften im allgemeinen recht gut.

  • Internet Explorer kennt den ganzen Krempel erst ab Version 9. In der Regel bleiben IE6 bis inklusive IE8 also außen vor.

Die Grundregel lautet dabei "Je neuer die Versionsnummer, desto besser ist die CSS3-Unterstützung".

Die Browser-Prefixes: »-webkit-«, »-moz-«, »-o-« und »-ms-«

Da die Spezifikation für viele CSS3-Eigenschaften noch im Werden begriffen und nicht wirklich fertig ist, unterscheidet sich bei einigen die Umsetzung der verschiedenen Browser zum Teil erheblich. Die meisten modernen Browser können zum Beispiel Farbverläufe darstellen, aber die genaue Syntax dazu ist momentan noch sehr unterschiedlich. Die Browserhersteller sind deshalb dazu übergegangen, noch nicht fertige CSS3-Eigenschaften mit einem Browser-Prefix zu versehen, mit denen man ganz gezielt bestimmte Browser ansprechen kann.

Die folgende Tabelle zeigt einen Überblick über die wichtigsten Browser-Prefixes und listet auch gleich den Namen der »Layout Engine« auf. Das ist der Kern des Browsers, der Teil, der den Quelltext für die Ausgabe am Bildschirm aufbereitet.

Browser Prefix Layout Engine
Apple Safari -webkit- Webkit
Google Chrome -webkit- Webkit
Mozilla Firefox -moz- Gecko
Opera -o- Presto
Internet Explorer -ms- Trident

Die genaue Anwendung dieser Browservorsilben lernt ihr gleich kennen. Momentan ist allein deren Existenz wichtig. Eric Meyer hat in einem ausführlichem Artikel vom Juli 2010 erklärt, warum er Browser-Prefixes für eine gute Idee hält.

nach oben