CSS3: Die neuen Features für fortgeschrittene Webdesigner

Vorwort

CSS3 ist allgegenwärtig.

Der Siegeszug von CSS3 ist unbestreitbar und unübersehbar. CSS3 ist im Web allgegenwärtig: eine über CSS3 abgerundete Ecke hier, eine leichte Transparenz dort, ein Schatten da, woanders ein schöner Farbverlauf, und für die Überschrift wurde vielleicht eine individuelle Schrift gewählt. Neben diesen rein optischen Aufhübschungen kann CSS3 aber noch mehr. Sie können CSS3 für Dinge verwenden, die früher bei CSS undenkbar schienen: Für viele Animationen ist CSS3 die bessere Wahl als JavaScript. Und schließlich hat ein weiteres CSS3-Feature – die Abfragen nach Geräteeigenschaften über CSS3 Media Queries – das Responsive Webdesign, einen der wichtigsten aktuellen Trends bei Webseiten, erst ermöglicht. Responsive Webdesign bedeutet flexible Webseiten, die sich an die Gegebenheiten des Ausgabemediums anpassen. Layouts, die bei viel Platz mehrspaltig sind, können etwa auf einem Smartphone problemlos einspaltig angezeigt werden.

Mobil ohne CSS3 geht nicht.

Apropos Smartphones: Der mobile Zugriff hat heute eine ganz zentrale Bedeutung fürs Webdesign. Wenn Sie Ihre Webseiten fit für Smartphones machen wollen, kommen Sie wiederum nicht an CSS3 vorbei. Denn viele Dinge, die zwar auch mit CSS 2.1 unter Zuhilfenahme von Bildern funk-tionieren würden, gehen mit CSS3 direkt und sind damit wesentlich performanter. Und auch für App-typische Seitenübergänge ist CSS3 mit einer Prise JavaScript die richtige Wahl. Wenn Sie sich einmal das Stylesheet von jQuery Mobile, einem beliebten Framework für mobile Seiten und mobile Web-Apps, ansehen, werden Sie dort hauptsächlich CSS3 vorfinden. Kurz gefasst: Wenn Sie moderne Webseiten für Smartphones, Desktops und Tablets oder auch Web-Apps für mobile Geräte erstellen wollen, dann führt kein Weg an CSS3 vorbei.

Besser mit CSS3

CSS3 bedeutet in vielen Fällen eine Arbeitserleichterung. Das klassische Beispiel hierfür sind die abgerundeten Ecken. Wenn Sie früher eine flexible Box erstellen wollten, so benötigten Sie hierfür vier Hintergrundbilder und eine ausgeklügelte Methode, diese zuzuweisen. Mit CSS3 geht das ganz einfach: Die Eigenschaft border-radius macht das, was ihr Name verspricht.

Das heißt, die Lösung durch CSS3 ist in diesem Fall einfacher zu realisieren und damit auch besser zu warten. Bei eventuellen Änderungen müssen keine Bilder neu erstellt werden, sondern man braucht nur die CSSDatei anzupassen.

Ein weiterer Vorteil ist die verbesserte Performance: Zusätzliche Bilder, die geladen werden müssen, bedeuten zusätzliche HTTP-Requests, also Zeit. Und die sparen Sie sich und Ihren Besuchern. Was sind also nun die wichtigsten Vorteile von CSS3?

Vorteile von CSS3

In CSS 2.1 müssen Sie für manche Effekte komplizierte Tricks anwenden, CSS3-Formatierungen sind einfach und direkt.

CSS3-Lösungen sind schneller zu implementieren, leichter zu warten und anzupassen.

CSS3 ist performanter. Viele CSS-2.1-Effekte basieren auf Hintergrundbildern; mit CSS3 können Sie auf Bilder verzichten, was HTTP-Requests spart.

Trent Walton kommt im »Smashing Magazine« anhand einer Beispielseite zu dem Ergebnis, dass sich die CSS3-Variante um 33% rascher erstellen lässt, dass die Dateien um fast 10% kleiner sind und dass aufgrund der geringeren Anzahl an HTTP-Requests die Webseite um 45% schneller lädt.¹

Aber CSS3 anzuwenden ist nicht immer ganz einfach:

CSS3 ist nicht immer einfach.

Erstens, weil das, was CSS3 ermöglicht, ebenfalls komplex ist. Beispiel 3D Transforms: Das eröffnet neue Perspektiven – aber in die Einstellungsmöglichkeiten muss man sich auch erst einmal hineinfinden. Ähnlich ist es bei den über CSS3 realisierten Animationen oder den neuen Media Queries.

Zweitens, weil die Browser die Spezifikation, die sich in manchen Punkten ja noch in der Entwicklung befindet, unterschiedlich implementiert haben und sich auch nicht alle CSS3-Features heute schon gleichermaßen für den produktiven Einsatz eignen.

Und drittens, weil es unterschiedliche Möglichkeiten gibt, in älteren Browsern nachzubessern und mit nicht unterstützenden Browsern umzugehen.

Deswegen ist CSS3 nicht nur einfach wunderbar, sondern bietet auch mehr als genug Material für ein Buch ...

Was in diesem Buch steht

CSS3 heute

Kapitel 1, »CSS3 heute«, informiert Sie über den aktuellen Stand der Dinge bezüglich CSS3. Sie erfahren, dass CSS3 in Module unterteilt ist, die unterschiedlich nahe an der endgültigen Verabschiedung sind, und welche Strategien Browser entwickelt haben, um mit dieser ungewissen Situation umzugehen. Außerdem lesen Sie, warum und wann Sie die CSS3-Features mit welcher Strategie einsetzen können. Die Vorteile von CSS3 werden hier auch noch einmal näher behandelt.

Umgehen mit unterschiedlichen Browsern

An dem Thema Browser und unterschiedliche Implementierungen kommt niemand vorbei, der in der Webentwicklung unterwegs ist. Erst recht nicht, wenn man vorhat, neue Features einzusetzen. Und so zeigt Kapitel 2, »Umgang mit unterschiedlichen Browsern«, die wichtigsten Tools und Strategien im Umgang mit den Browserunterschieden: von einem großartigen Tool namens Modernizr bis hin zum richtigen Umgang mit Conditional Comments, die die Performance nicht beeinträchtigen – inklusive einer kurzen Exkursion in die Unterwelt der proprietären Techniken wie Filter.

Transparenzen

Transparenzen sind ein wichtiges Element von Webdesigns. Mit CSS3 gibt es gleich zwei Möglichkeiten für Transparenzen – zum einen die Eigenschaft opacity und zum anderen die neuen Farbdefinitionen über rgba() und hsla(). Wie diese funktionieren und wie man in Browsern nachbessert, die weniger transparenzfreudig sind, zeigt Kapitel 3, »Transparenzen«.

Selektoren

Auf den ersten Blick wirken Selektoren wenig sexy. Aber nicht ganz ohne Grund hat Eric Meyer die CSS3-Selektoren als eines der attraktivsten Features von CSS3 erkoren.² Und sie bieten eine enorme Arbeitserleichterung, sodass man mehr Zeit auf die spannenderen Features verwenden kann. Aber neben der Einsparung von Klassen und Ids im HTML-Code ermögli-chen die CSS3-Selektoren auch interaktive Komponenten – beispielsweise durch die scheinbar so harmlosen Selektoren :target oder auch :checked. Guter Stoff für Kapitel 4, »Alle Macht den Selektoren«, das auch einen Ausblick auf die in Zukunft angedachten neuen Selektoren bietet (mitunter auch fälschlich als »CSS4« betitelt).

Typografie

Wer vom Printbereich kommt und sich aufs Webdesign einlässt, leidet oft unter den äußerst beschränkten Möglichkeiten für die Typografie und individuelle Schriften. Mit CSS3 wird alles besser: Webfonts funktionieren bestens, und besonders praktisch sind auch die Icon-Fonts. Daneben gibt es Textschatten, OpenType-Features und mehr ... alles Themen von Kapitel 5, »Mehr Typografie – Webfonts, Textschatten und mehr«.

Rahmen und Hintergründe

Bei einer Umfrage nach der bekanntesten CSS3-Eigenschaft stünde sicher border-radius an vorderster Stelle – runde Ecken per CSS! Aber das Hintergrund- und Rahmen-Modul, das in Kapitel 6, »Rahmen, Schatten und Hintergrundbilder«, vorgestellt wird, hat noch einiges mehr zu bieten: von mehrfachen und skalierbaren Hintergrundbildern über Schatteneffekte bis hin zu Bildern für Rahmen.

Farbverläufe

CSS3 ersetzt oft den Aufruf des Bildbearbeitungsprogramms, etwa wenn sich runde Ecken direkt durch die entsprechende Eigenschaft erstellen lassen. Weniger Bilder bedeuten bessere Performance und einfachere Wartung. Dazu passen thematisch dann auch die Farbverläufe über CSS, die einen zentralen Platz bei der Gestaltung von Buttons, Tabs und Menüs haben und die Kapitel 7, »Farbverläufe«, zeigt.

Transformationen

Wer Elemente drehen oder verzerren will, musste früher Bilder einsetzen. Mit CSS3 geht das ganz ohne – ein paar Zeilen Code sorgen für den gewünschten Effekt. Der Vorteil: Die Texte sind weiterhin für Suchmaschinen auslesbar und bleiben auch für Screenreader nutzbar – ganz im Unterschied zu Bildern. Möglich wird das durch die CSS3 Transforms, um die sich alles in Kapitel 8, »Transformationen«, dreht. Im wahrsten Sinne des Wortes neue Dimensionen für Benutzeroberflächen eröffnen sich insbesondere durch die 3D Transforms.

Transitions und Animations

Übergänge sind in CSS nicht wahrnehmbar. Wenn ein Menüpunkt beim Hovern die Farbe ändert, so findet dieser Wechsel abrupt statt. CSS3 macht den Übergang sichtbar und Benutzeroberflächen schöner. CSS Transitions werden in Kapitel 9, »Transitions und Animations«, behandelt. Ein weiteres Thema des Kapitels sind die CSS-Animationen. Sie ermöglichen Effekte, die man sonst nur über JavaScript oder Flash erreichen konnte. JavaScript hat bei Transitions/Animations aber trotzdem nicht ausgedient, denn es kann mittels Klassenzuweisungen die Animation auslösen. Praktisch sehen wir uns das anhand eines animierten Seitenübergangs und einiger Bildüberblendeffekte an.

Media Queries für Responsive Webdesign

Die Bildschirme werden immer größer und gleichzeitig immer kleiner – die Unterschiede zwischen den einzelnen Geräten, mit denen Webseiten betrachtet werden, sind so groß wie nie, und das wird sich in absehbarer Zeit auch nicht ändern. Eine Antwort auf dieses Problem sind Media Queries – passende CSS-Angaben je nach den Eigenschaften des Ausgabegeräts. Media Queries sind die wichtigste Komponente des Responsive Webdesigns – eines Webdesigns, das sich an das Gerät anpasst, auf dem es betrachtet wird. Wie das in der Praxis funktioniert, zeigt Kapitel 10, »Responsive Webdesign«, inklusive nützlicher Tricks fürs Responsive Webde-sign, etwa eine Off-Canvas-Präsentation für einzelne nicht sofort benötigte Bereiche auf kleinen Bildschirmen oder eine Klappnavigation.

Flexible Layouts

Wer flexible Layouts erstellen möchte, für den ist heute float das Maß aller Dinge – außer er verwendet CSS3. Da gibt es gleich mehrere Module, die float seine Vormachtstellung streitig machen können: Zuerst ist da das Multi-column zur Erstellung von Text, der sich automatisch auf mehrere Spalten verteilt. Besonders nützlich ist das Flexible Box Layout für wirklich flexible Boxen, womit viele Layoutprobleme wie richtige Zentrierung, gleich lange Spalten oder auch Leerraumaufteilungen bei flexiblen Menübuttons der Vergangenheit angehören. Das alles ist Thema von Kapitel 11, »Layouten mit CSS3«.

Hilfreiche Details

Schließlich konzentrieren wir uns in Kapitel 12, »Neue Einheiten und mehr« auf überaus hilfreiche Details wie die Eigenschaft box-sizing oder die neuen Einheiten rem und vw.

LESS und Sass

Was an CSS3 abschreckend wirkt, ist, dass Sie viele Eigenschaften noch für ältere Browser mit eigenen Präfixen schreiben müssen. Das verdop-pelt den Code und macht Änderungen mühsam. Mehrere Tools verspre-chen Abhilfe. Besonders komfortabel geht es mit CSS-Präprozessoren wie LESS und Sass, die sich inzwischen einen festen Platz im aktuellen CSSWorkflow erobert haben. Im Anhang finden Sie alles für den Einstieg mit LESS/Sass und wie Sie sich darüber die Arbeit mit CSS3 erleichtern. Außerdem führt der Anhang die wichtigsten Links für weitere Informationen auf und fasst die vorgestellten Features samt ihrer Browserunterstützung zusammen.

Browserunterstützung

Die Browserunterstützung ist ein heikler Punkt, wenn es um CSS3 geht: Nicht alles ist gleichermaßen praktikabel, bei manchem kann man es verschmerzen, wenn ein Browser das entsprechende Feature nicht darstellt, bei anderen wiederum ist es unverzichtbar, man muss eine Fallbacklösung haben oder nachbessern ... um diese Fragen geht es natürlich auch jeweils in den einzelnen Kapiteln.

Im Vergleich zu meinem CSS3-Buch von 2011 ...

Aktualisierungen und Ergänzungen

...wurden alle Inhalte aktualisiert und erweitert – neu berücksichtigt habe ich die veränderte Browsersituation (IE10, Änderungen bei Opera, Chrome) und die neue Version der Spezifikationen (CSS-Gradients, Flexbox etc.). Außerdem gibt es jede Menge Neuerungen, hier nur eine kleine Auswahl: CSS3-Filtermöglichkeiten über die Pseudoklasse :checked; die Vermeidung des FOUT bei der Verwendung von Webfonts; OpenType-Features, Icon-Fonts, nette Tricks mit Spread Distance bei box-shadow; die Erstellung von Buttons mit Farbverläufen und Boxschatten; Farbverläufe mit Transparenzen kombinieren, Farbverläufe animieren; die Erstellung eines 3D-Würfels; Bildüberblendeffekte, animierte Seitenübergänge, die neuen flexiblen Viewport-basierten Einheiten wie vw und, und, und ...

Was nicht in diesem Buch steht

CSS-Kenntnisse werden vorausgesetzt.

Das Buch ist keine Einführung in CSS. Vorausgesetzt wird, dass Sie über grundlegende CSS-Kenntnisse verfügen, also etwa wissen, wie Sie Stylesheets einbinden, die gängigsten CSS-2.1-Eigenschaften einsetzen und Selektoren wie Klassen und Ids verwenden; auch ein Layout sollten Sie einmal realisiert haben.

Alles Wichtige zum neuen Standard

Das Buch ist hingegen das Richtige für Sie, wenn Sie das Wichtigste zu CSS3 erfahren wollen: Vielleicht haben Sie bisher noch wenig CSS3 eingesetzt, dann finden Sie hier einen anschaulichen Einstieg. Auch wenn Sie bereits mit dem einen oder anderen CSS3-Feature gearbeitet, aber keinen systematischen Überblick haben, erfahren Sie hier die Zusammenhänge und lernen nützliche Tricks und weitergehende Möglichkeiten.

Was Sie sonst noch wissen sollten

Die Website zum Buch: css3-features.de.

Die Listings zum Buch können Sie auf der Website zum Buch unter http://www.css3-features.de herunterladen, dort finden Sie auch Aktualisierungen zu den vorgestellten Inhalten.

CSS3 ist ein weites Feld, über das man gleich mehrere Bücher schreiben könnte. Ich musste also eine Auswahl der zu behandelnden Features treffen. Ausgewählt wurden die Features, die besonders attraktiv sind und sich einer guten oder sogar sehr guten Browserunterstützung erfreuen.

Im Steckbrief in jedem Kapitel finden Sie eine Tabelle mit der Brow-serunterstützung. Angegeben ist immer die erste Browserversion, die ein bestimmtes Feature implementiert, wenn die Unterstützung erst seit Kurzem eingeführt wurde.

Apropos Browser: Jede neue Browserversion brüstet sich unter anderem mit einer verbesserten CSS3-Unterstützung. Damit Sie alles selbst austesten können, brauchen Sie auf jeden Fall mehrere Browser, zumindest den aktuellen Firefox, den aktuellen Chrome, am besten auch Opera, Safari und Internet Explorer 10.

So, ich hoffe, Sie freuen sich jetzt mit mir auf die vielen neuen Features und Möglichkeiten. Und damit: Vorhang auf für CSS3!

http://www.smashingmagazine.com/2011/04/21/css3-vs-css-a-speed-benchmark

http://sixrevisions.com/interviews/six-questions-eric-meyer-on-css3/

1 CSS3 heute

CSS3 ist schon da. Es ist nur noch nicht gleichmäßig verteilt.

Dieses Kapitel gibt Ihnen einen Crashkurs über die äußeren Umstände von CSS3: Sie erfahren, wie es heute um CSS3 steht, wie der Standardisierungsprozess abläuft und wie weit die unterschiedlichen Komponenten von CSS3 entwickelt sind. Außerdem beschäftigen wir uns mit den unterschiedlichen Browsern sowie den herstellerspezifischen Präfixen und wie Sie damit richtig umgehen.

Der zweite Teil des Kapitels liefert Ihnen Hinweise, die man berücksichtigen muss, um zu entscheiden, wann und wie man CSS3 einsetzt. Schließlich geht es noch einmal etwas ausführlicher als im Vorwort um die Vorteile von CSS3, den Nutzen von CSS für mobile Geräte und um die wichtige Frage, inwieweit Seiten in unterschiedlichen Situationen auch unterschiedlich aussehen dürfen.

1.1 CSS3 – Stand der Dinge

CSS3 ist im Gegensatz zu CSS 2.1 kein monolithischer Block, es ist nicht eine einzige Spezifikation, sondern in unterschiedliche Module aufgeteilt. Das hat zwei Vorteile: Zum einen können Browserhersteller auch nur einzelne Module implementieren. Und zum anderen können einzelne Module schneller fertiggestellt werden als eine umfassende Gesamtspezifikation. Einen aktuellen Überblick über den Stand der einzelnen Module finden Sie unter http://www.w3.org/Style/CSS/current-work.

Wege zur Standardisierung

Hinter jedem Modul sind der derzeitige Status und der folgende Status angegeben. Alle Module müssen zu ihrer Verabschiedung einen bestimmten Weg durchlaufen. Dieser sieht folgendermaßen aus:

Working Draft (WD) – Arbeitsentwurf

Last Call (LD) – Letzter Aufruf

Candidate Recommendation (CR) – Veröffentlichungsvorschlag

Proposed Recommendation (PR) – Geplante Veröffentlichung

W3C Recommendation (REC) – Standard

Eigentlich heißt »Recommendation« so viel wie Empfehlung. Die fertigen Spezifikationen des W3C heißen Recommendation und nicht Standard oder ähnlich, da das W3C kein klassisches Standardisierungsgremium ist. De facto sind diese aber wie Standards, deswegen ist die deutsche Übersetzung passend, die von der offiziellen Seite des W3C stammt.

Es ist wichtig zu wissen, in welchem Zustand sich ein Modul befindet: Denn die Wahrscheinlichkeit für Änderungen ist höher, je weiter unten sich ein Modul im Standardisierungsprozess befindet. Bei Working Drafts sind Änderungen folglich wahrscheinlicher als bei einer Proposed Recommendation.

Abb. 1-1 Die Seite des W3C der CSS-Arbeitsgruppe

Keine Recommendation ohne Implementierung

Man könnte vermuten, dass ein Modul vom W3C in den Status einer Recommendation erhoben wird und danach die Browserhersteller begin-nen, die entsprechenden Features zu implementieren. So läuft es aber nicht: Die Browserhersteller implementieren die Features schon wesentlich früher. Damit eine Recommendation überhaupt eine solche werden kann, muss es entsprechende Implementierungen geben. Eine Implementierung ist auf jeden Fall gefordert, besser sind jedoch zwei »preferably, the Working Group SHOULD be able to demonstrate two interoperable implementations of each feature«.¹ Das bedeutet, dass nur etwas eine Recommendation wird, was sich auch als praxistauglich erwiesen hat.

Der eben vorgestellte Weg der Standardisierung ist außerdem keine Einbahnstraße. Es kann auch vorkommen, dass ein Modul herabgestuft wird. So passierte es beispielsweise bei CSS 2.1, das bereits am 8.9.2009 eine Candidate Recommendation war und am 7.12.2010 als Last Call heruntergestuft wurde. Am 12.4.2011 wurde CSS 2.1 wieder in den Zustand einer Candidate Recommendation erhoben.

Ein paar Beispiele für wichtige Module und den Status, in dem sie sich befinden (Stand Herbst 2013):

Recommendations

CSS 2.1 befindet sich seit April 2011 im Status einer Recommendation. Das bedeutet, obwohl CSS 2.1 schon lange eingesetzt wird, war es bis April 2011 noch keine Recommendation. Das ist ein bemerkenswerter Punkt. Denn häufig wird als pauschales Argument gegen den Einsatz von CSS3-Features angeführt, dass CSS3 noch nicht verabschiedet ist.

Weit gediehen ist das Selectors-Modul. Es ist seit dem 29. September 2011 Recommendation, d.h. offiziell verabschiedet. Das Modul beinhaltet neben den aus CSS 2.1 bekannten Selektoren spannende Features wie :nth-child() zur Auswahl des soundsovielten Kindelements oder :target, um das Ziel von internen Verweisen hervorzuheben (mehr dazu in Kapitel 4, »Alle Macht den Selektoren«). Das W3C arbeitet bereits an einer Nachfolgespezifikation mit weiteren Features.

Ebenfalls im Status einer Recommendation befindet sich das Color-Modul, das neben den klassischen, aus CSS 2.1 bekannten Möglichkeiten zur Definition von Farben auch Farbdefinitionen mit Alphakanal vorsieht – schön für transparente Bereiche (Kapitel 3, »Transparenzen«).

Auch schon offiziell verabschiedet im Juni 2012 als Recommendation ist die Spezifikation für Media Queries. Media Queries erlauben CSS-Angaben je nach Eigenschaft des Ausgabegeräts und sind damit eine zentrale Komponente des Responsive Webdesign (Kapitel 10, »Responsive Webdesign«).

Candidate Recommendations

Das Backgrounds and Borders-Modul beinhaltet border-radius für abgerundete Ecken, mehrfache Hintergrundbilder, Bilder für Rahmen etc. (alles Thema in Kapitel 6, »Rahmen, Schatten und Hintergrundbilder«). Es ist im Herbst 2013 eine Candidate Recommendation.

Das Multi-column Layout-Modul ermöglicht Mehrspaltenlayouts: Damit kann man in einem Bereich einen Text normal fließen lassen und dann angeben, dass dieser auf zwei oder mehr Spalten verteilt wird (Kapitel 11, »Layouten mit CSS3«). Dieses Modul ist ebenfalls im Zustand einer Candidate Recommendation.

Das CSS Image Values-Modul »definiert, wie Eigenschaften auf Bilder per URL verweisen«. Sie brauchen es beispielsweise, um Farbverläufe per CSS zu erstellen (Kapitel 7, »Farbverläufe«). Es liegt ebenfalls als Candidate Recommendation vor.

Das Flexible Box Layout ist das Layoutmodul der Zukunft (Kapitel 11, »Layouten mit CSS3«). Nach einer etwas bewegten Geschichte und mehreren tief greifenden Änderungen ist es ebenfalls seit September 2012 Candidate Recommendation, und damit ist die jetzt definierte Syntax recht stabil.

Das Values and Units-Modul führt neue Einheiten ein und ermöglicht neue Arten der Flexibilisierung. Auch dieses Modul ist bereits eine Candidate Recommendation (Kapitel 12, »Neue Einheiten und mehr«).

Aber auch mehrere Module, die sich derzeit »erst« im Zustand eines Working Draft befinden, bieten interessante Optionen und lassen sich heute schon gewinnbringend einsetzen.

Wichtige Module als Working Draft

Das CSS Fonts-Modul (Kapitel 5, »Mehr Typografie – Webfonts, Text-schatten und mehr«) liegt als Working Draft vor und beinhaltet unter anderem die @font-face-Regel, über die sich herunterladbare Schriften in Webseiten integrieren lassen. Und mit ein paar Tricks funktioniert das sogar bis zurück zum Internet Explorer 6, obwohl wir den ja normalerweise inzwischen ignorieren können.

Ebenfalls spannend ist das Transforms-Modul, das Eigenschaften zum Drehen und Skalieren von Elementen im 2D- und 3D-Raum bereitstellt und das alle aktuellen Browser unterstützen, der IE9 zumindest die 2D-Transformationen (Kapitel 8, »Transformationen«). Transformationen sind wichtig für viele Seitenübergangseffekte oder schicke Bildwechsel.

Das CSS Transitions-Modul ist auch ein Working Draft und ermöglicht sanftere Übergänge – beispielsweise für Änderungen beim Hovern, aber nicht nur (Kapitel 9, »Transitions und Animations«).

Auch die CSS Animations– Animationen über CSS (Kapitel 9, »Transitions und Animations«) – sind derzeit ein Working Draft, aber inzwischen in allen aktuellen Browsern implementiert. Wenn Sie sich einmal gefreut haben an den schönen Seitenübergängen von jQuery Mobile – diese sind alle über CSS Animations realisiert.²

Das war nur ein Ausschnitt aus den neuen CSS3-Modulen – es gibt natürlich wesentlich mehr. Ausgewählt im Buch wurden diejenigen, die so weit von Browsern unterstützt werden, dass Sie sie heute schon einsetzen können.

1.2 CSS3 und die aktuellen Browser

Alle aktuellen Browser zeichnen sich durch eine sehr gute CSS3-Unterstützung aus. Hier ein paar Details und wichtige Meilensteine.

Firefox

Firefox unterstützt viele CSS3-Features wie die CSS3-Selektoren, das Color-Modul, große Teile des »Backgrounds and Borders«-Moduls, Media Queries, Webfonts und Teile des »Multi-column Layout«-Moduls und der Transformationen, Transitions und Animations und auch das Flexbox-Modul. Meilensteine sind Version 4, die beispielsweise Animationen und 3D-Transformationen brachte, und Version 16, durch die man sich in vielen Fällen das browserspezifische Präfix -moz- ersparen kann.

Safari und Chrome

Webkit-basierte Browser wie Safari und Chrome sind in Sachen CSS3 sicher Vorreiter. Sie unterstützen unter anderem neben den bei Firefox genannten Features etwa auch CSS3-Filter-Effekte. Es gibt jedoch Unterschiede zwischen den einzelnen Webkit-Browsern, die unter anderem damit zusammenhängen, dass Chrome einen rascheren Update-Zyklus hat. Beim Safari sind Version 5 und 5.1 wichtige Meilensteine, so unterstützt Safari seit 5.1 beispielsweise die neue modifizierte Syntax für Farbverläufe.

Apropos Chrome: Google hat im Frühjahr 2013 angekündigt, in Zukunft eine eigene Browser-Engine mit Namen Blink für Chrome zu nutzen. Es ist jedoch keine eigene Browser-Neuentwicklung, sondern ein Fork von Webkit, sodass sich für Webentwickler nicht zu viel ändern sollte.

Opera

Opera muss sich, was seine CSS3-Unterstützung betrifft, beileibe nicht verstecken. Ein Meilenstein war hier die Version 10.5 (Layout-Engine Presto 2.5), die CSS3 Transitions und 2D Transforms bringt und eine verbesserte Unterstützung für das »Backgrounds and Borders«-Modul liefert. Mit Version 11.10 kommt die Unterstützung für das »Multi-column Layout«-Modul und CSS-Farbverläufe. In Version 12.1 sind viele Eigenschaften ohne herstellerspezifische