CSS 3 und neuer: Flexbox, Grid, Variablen, Media Queries – die Module nach CSS 2.1

Die Module

1. CSS FlexboxFlexbox ordnet die Kinder eines Containers entlang einer Achse an: nebeneinander oder untereinander, mit verteiltem Platz, ausgerichtet, umbrechend.Labor
2. CSS GridGrid legt ein Raster aus Zeilen und Spalten über einen Container und setzt die Kinder in seine Zellen.Labor
3. CSS VariablenCSS kennt eigene Variablen: Eine Custom Property beginnt mit zwei Bindestrichen, wird wie jede Eigenschaft deklariert und mit var() gelesen.Labor
4. CSS Media QueriesCSS 2.1 kannte Medientypen: screen, print, handheld.Labor
5. CSS TransitionsÄndert sich der Wert einer Eigenschaft – durch :hover, eine Klasse, eine Media Query –, springt der Browser sofort zum neuen Wert.Labor
6. CSS AnimationenEine Animation beschreibt mit @keyframes beliebig viele Zwischenzustände und lässt sie mit den animation-Eigenschaften ablaufen: einmal, wiederholt, vor und zurück, mit Verzögerung.Labor
7. CSS Transformtransform verändert die Darstellung eines Elements, nicht seinen Platz im Fluss: Es wird verschoben, gedreht, skaliert oder geneigt, während die Nachbarn stehen bleiben, wo sie sind.Labor
8. CSS SchattenEin Schatten unter einer Box oder hinter Text braucht keine Grafik mehr: box-shadow und text-shadow nehmen Versatz, Weichzeichnung und Farbe als Werte.Labor
9. @font-faceMit @font-face lädt der Browser eine Schriftdatei vom Server und stellt sie unter einem frei gewählten Namen bereit.Labor
10. CSS Selektoren Level 3CSS 2.1 kennt :first-child, aber nicht :last-child; Attributselektoren, aber keine Teilstring-Vergleiche; :before mit einem Doppelpunkt.Labor

Wie sich die Module zu CSS 2.1 verhalten

Kein Modul ersetzt CSS 2.1. Kaskade, Vererbung, Spezifität, das Box-Modell und der normale Fluss gelten unverändert; die Module bauen darauf auf. Flexbox und Grid sind neue Werte für display, die für die Kinder eines Containers einen anderen Formatierungskontext eröffnen. Media Queries erweitern die @media-Regel um Bedingungen. Custom Properties sind Eigenschaften, die der Kaskade folgen wie alle anderen. Transitions und Animationen ändern nicht, welcher Wert gilt, sondern wie der Browser zu ihm gelangt.

Wer die Grundlagen aus Grundlegendes kennt, liest jedes Modul als Ergänzung: Wo CSS 2.1 einen Umweg brauchte – Floats für Spalten, negative Außenabstände zum Zentrieren, Grafiken für Schatten und Schriften –, nennt die Modulseite den direkten Weg und verweist auf das alte Tutorial, das den Umweg dokumentiert.

Warum es kein CSS 3 als Ganzes gibt

Nach CSS 2.1 hat das zuständige Gremium die Sprache nicht mehr als ein Dokument fortgeschrieben, sondern in Module aufgeteilt, die unabhängig voneinander wachsen. Jedes Modul hat eine eigene Nummer, und die Nummern haben nichts miteinander zu tun: Die Selektoren stehen bei Stufe 4, die Farben ebenfalls, Flexbox bei Stufe 1. Der Begriff CSS 3 bezeichnet keine Fassung der Sprache, sondern die erste Generation dieser Module – und wird deshalb in der Spezifikation selbst nicht verwendet.

Der Grund für die Aufteilung ist praktisch: CSS 2 brauchte von der ersten Empfehlung bis zur überarbeiteten Fassung dreizehn Jahre, weil ein einziger strittiger Abschnitt das ganze Dokument aufhielt. Module lösen das, indem sie einzeln reifen können. Für die Praxis heißt das, dass nicht nach einer Version gefragt wird, sondern nach einer Eigenschaft – und dass die Frage, ob etwas zu CSS 3 gehört, keine sinnvolle Antwort hat.

Was heute vorausgesetzt werden darf

Alle zehn hier beschriebenen Module sind in den verbreiteten Browsern seit Jahren vollständig umgesetzt; für sie braucht es weder Herstellerpräfixe noch einen Rückfall. Die Präfixe, die in Anleitungen aus den frühen Zehnerjahren stehen, sind heute nicht nur überflüssig, sondern schädlich: Manche greifen noch, sind aber nach einer älteren Fassung der Spezifikation umgesetzt und liefern deshalb ein anderes Ergebnis als die Fassung ohne Präfix.

Verlässliche Auskunft darüber, was vorausgesetzt werden darf, geben die gepflegten Übersichten zur Browserunterstützung – nicht die Jahreszahl eines Moduls. Zwischen der Aufnahme einer Eigenschaft in die Spezifikation und ihrer Verfügbarkeit in allen Browsern liegen regelmäßig mehrere Jahre, und gelegentlich kommt die Umsetzung sogar zuerst.

Für alles Neuere gibt es eine eingebaute Prüfung: Eine At-Regel fragt, ob der Browser eine Deklaration versteht, und schließt einen Block ein, der nur dann gilt. Damit lässt sich eine Verbesserung hinzufügen, ohne die Grundgestaltung zu gefährden – erst der Weg, der überall funktioniert, dann in der Bedingung der bessere. Umgekehrt lässt sich mit einer verneinten Bedingung auch ein Rückfall nur dort setzen, wo er gebraucht wird.