Mai 2011
CSS3 – Neue CSS-Stile
CSS3 ist kein abgeschlossener Standard, sondern eher ein Sammelsurium von Modulen, die CSS 2.1 ergänzen.
Der wohl prominenteste Vertreter unter den neuen CSS3-Stilen ist border-radius, eine CSS-Eigenschaft, die ohne Pixelbilder für runde Ecken von Elementen sorgt. Verläufe und Schlagschatten für Texte und Boxen – text-shadow und box-shadow – gehören ebenfalls in das Repertoire von CSS3.
CSS1 wurde 1996 veröffentlich, 1998 wurde CSS2 veröffentlicht. Zu dieser Zeit interessierte sich kein Browserhersteller für die Standards, geschweige denn, dass ein Hersteller diese Spezifikation jemals vollständig implementiert hätte.
2004 wurde CSS 2.1 veröffentlicht. Wenn wir über CSS sprechen, reden wir meist von CSS 2.1, denn mit CSS 2.1 kommen die Browserhersteller an Bord und nehmen die Web-Standards ernst.
Es gibt keine CSS3-Spezifikation.
Die Arbeit an CSS3 begann bereits 2001. CSS3 teilt CSS in Module – CSS Selektoren sind ein Modul, CSS Farben und Hintergrund sind ein anderes Modul. Die Einteilung in Module macht das große Feld der CSS-Eigenschaften handlicher: Module können nachgeschoben werden, wenn neue Geräte auf dem Markt kommen. CSS3 sind also Module, die CSS 2.1 ergänzen.
- Die CSS3-Selektoren geben einen direkten Zugriff auf verschachtelte HTML-Elemente ohne CSS-Klassen.
- CSS3 ergänzt die einfachen RGB-Farben vor allem um Transparenz
- Effekte: Verläufe, Text-Effekte, Schlagschatten für Texte und Boxen
- Abgerundete Ecken, mehrere Hintergrundbilder, Bilder für Rahmen
Welche CSS3-Stile kann ich heute nutzen?
| Firefox | Opera | Safari | iPhone | iPad | Chrome | IE6 | IE7 | IE8 | IE9 | |
|---|---|---|---|---|---|---|---|---|---|---|
| CSS Round Corners | Ja | Ja | Ja | Ja | Ja | Ja | N | N | N | Ja |
| CSS Embed Fonts | Ja | Ja | Ja | Ja | Ja | Ja | Ja | Ja | Ja | Ja |
| CSS Gradients | Ja | Ja | Ja | Ja | Ja | Ja | * | * | * | * |
| CSS Box Shadow | Ja | Ja | Ja | Ja | Ja | Ja | N | N | N | Ja |
| CSS Text Shadow | Ja | Ja | Ja | Ja | Ja | Ja | N | N | N | Ja |
| CSS Text Columns | Ja | Ja | Ja | Ja | Ja | Ja | N | N | N | Ja |
| Dynamic Image Sizing | Ja | Ja | Ja | Ja | Ja | Ja | Ja | Ja | Ja | Ja |
| HSL, HSLA, RGBA Farben | Ja | Ja | Ja | Ja | Ja | Ja | N | N | N | Ja |
Liste der CSS3-Module beim W3C
Nahezu alle neuen Eigenschaften in CSS3 werden von allen modernen Browsern außer Internet Explorer bis einschließlich Version 8 unterstützt. Ab Version 9 bringt dann auch Internet Explorer volle CSS-Unterstützung mit.
Ein einzelner Browser darf nicht den gesamten Fortschritt aufhalten – in diesem Sinne sollten Webdesigner ruhigen Gewissens CSS3 einsetzen, sofern sie das Design der Seite in IE nicht unbrauchbar machen. Wenn CSS-Stile zur Verbesserung des Zugriffs und zum Aufpeppen des Designs in ein stabiles Layout eingebracht werden, steht dem Einsatz von CSS3 an vielen Stellen nichts entgegen.
Fallback: Conditional Comments für Internet Explorer
Conditional Comments für Internet Explorer ermöglichen einen Fallback auf CSS2.1 und erlauben den Ersatz von CSS3-Stilen durche einfache Konstrukte für das Schlusslicht unter den Browsern.
Anfangs mussten viele der CSS3-Stile mit Browser-eigenem Präfix angesprochen werden – z.B. -moz-border-radius statt border-radius für Firefox bzw. -webkit-border-radius für die Webkit-basierten Browser wie Chrome, Safari und Konqueror, -o-border-radius für Opera-basierte Browser.
Inzwischen beherrschen die modernen Browser Chrome, Firefox, Safari, Opera und Internet Explorer 9 abgerundete Ecken mit kurzen CSS-Eigenschaft border-radius.