CSS3 und modernes CSS – Was steckt dahinter?

Bevor du hier einsteigst, solltest du die Grundlagen von HTML und CSS bereits kennen – also wissen, was ein Selektor ist und wie du einfache Styles vergibst. In der Roadmap siehst du, welche Inhalte du dafür durchgearbeitet haben solltest.

Wer nach CSS sucht, stolpert ständig über den Begriff CSS3: in Tutorials, Büchern, Stellenanzeigen und Kursen. Trotzdem gibt es CSS3 als offiziellen Standard nicht. In diesem Artikel klären wir, was der Begriff bedeutet, woher er kommt, wie CSS tatsächlich weiterentwickelt wird – und warum du auf dieser Seite meist von modernem CSS lesen wirst.

Die kurze Antwort

Es gibt keine einzelne Spezifikation namens „CSS3“ und es wird auch keine „CSS4“ oder „CSS5“ geben. Der Begriff CSS3 ist ein umgangssprachlicher Sammelbegriff für alles, was nach CSS 2.1 dazugekommen ist: abgerundete Ecken, Transitions, Animationen, Flexbox, Grid und vieles mehr. Offiziell ist er kein Standard, aber auch kein Fantasiewort – er hat eine nachvollziehbare Geschichte.

Ein kurzer Blick zurück

  • CSS1 (1996): Die erste Version. Schriftarten, Farben, Abstände – die absoluten Grundlagen.
  • CSS2 (1998): Deutlich größer. Positionierung, Medientypen und vieles mehr kamen dazu.
  • CSS 2.1 (2011 als Empfehlung abgeschlossen): Eine bereinigte Fassung von CSS2, die Fehler behob und das beschrieb, was Browser tatsächlich konnten.

CSS1 und CSS2 waren jeweils ein großes Dokument. Alles, was CSS konnte, stand in einer einzigen Spezifikation, die als Ganzes fertig werden musste.

Warum CSS in Module aufgeteilt wurde

Schon kurz nach CSS2 wurde klar, dass dieses Modell nicht mehr funktioniert. CSS wurde zu umfangreich, und die einzelnen Themen entwickelten sich unterschiedlich schnell. Wenn die Farben schon fertig sind, das Layout aber noch diskutiert wird, sollte niemand auf das Layout warten müssen.

Deshalb hat das W3C – die Organisation, die Webstandards betreut – CSS in Module aufgeteilt. Jedes Modul behandelt ein Thema und wird unabhängig von den anderen weiterentwickelt. Die Arbeit an diesen Modulen lief unter dem Namen „CSS3“. Damit war „CSS3“ von Anfang an ein Dach für viele einzelne Spezifikationen und nie ein einzelnes Dokument.

Module und Levels

Jedes Modul hat einen eigenen Namen und eine eigene Level-Nummer. Das Level zählt hoch, wenn ein Modul erweitert wird. Ein paar Beispiele:

  • Selectors: Level 3, inzwischen gibt es Level 4
  • Color: Level 3, dann Level 4 und Level 5
  • Backgrounds and Borders: Level 3
  • Flexbox: Level 1
  • Grid Layout: Level 1, dazu Level 2 (unter anderem mit Subgrid)
  • Media Queries: Level 3, 4 und 5

Fällt dir etwas auf? Flexbox und Grid starteten direkt bei Level 1 – und werden trotzdem ganz selbstverständlich zu „CSS3“ gezählt. Das zeigt, warum der Begriff nicht exakt ist: Er sagt nichts darüber aus, in welchem Level ein Modul tatsächlich steht.

Und CSS4?

Auch das gibt es nicht. Wer „CSS4“ liest, meint meist neuere Module wie Selectors Level 4 oder Color Level 4. Diese Level-Nummern gelten aber nur für das jeweilige Modul und nicht für CSS insgesamt. Es gibt keinen Zeitpunkt, an dem CSS als Ganzes auf eine neue Versionsnummer gehoben wird.

Damit man trotzdem einen Überblick hat, was aktuell als ausgereift gilt, veröffentlicht die CSS Working Group regelmäßig sogenannte CSS Snapshots. Ein Snapshot ist eine Momentaufnahme: Er listet auf, welche Module und Levels zu einem bestimmten Zeitpunkt als stabil gelten. Den aktuellen Stand findest du auf w3.org/TR/css.

Warum „CSS3“ trotzdem überall benutzt wird

Der Begriff ist bequem. „Das geht erst mit CSS3“ war jahrelang eine einfache Art zu sagen: Das ist neu und funktioniert nicht in alten Browsern. Er steckt in unzähligen Büchern, Tutorials und Suchanfragen – und wird deshalb so schnell nicht verschwinden.

Für dich als Lernende oder Lernenden ist das kein Problem, solange du weißt, was dahintersteckt. Wenn du selbst über CSS sprichst oder schreibst, ist es aber sauberer, einfach CSS zu sagen – oder das konkrete Modul zu nennen, zum Beispiel „CSS Grid“ oder „CSS Custom Properties“.

Modernes CSS – was ist das?

Statt „CSS3“ benutzen wir auf dieser Seite lieber den Begriff modernes CSS. Auch der ist nicht offiziell festgelegt, er wird aber in der Webentwicklung breit verwendet und beschreibt etwas Praktisches: CSS, wie man es heute schreibt.

Als Arbeitsdefinition gilt bei uns:

Modernes CSS sind alle Funktionen, die in den aktuellen Browsern zuverlässig funktionieren und die früher nötige Umwege überflüssig machen.

Der zweite Teil ist wichtig. Früher mussten Layouts mit float gebaut werden, Farben wurden hundertfach kopiert und für Variablen brauchte man zusätzliche Werkzeuge. Modernes CSS löst vieles davon direkt in der Sprache.

Ein paar Beispiele:

Eigene Variablen (Custom Properties)

:root {
    --farbe-akzent: #2a7de1;
    --abstand: 2rem;
}

.box {
    padding: var(--abstand);
    border-left: 0.4rem solid var(--farbe-akzent);
}

Werte werden einmal festgelegt und überall wiederverwendet. Änderst du die Akzentfarbe, ändert sie sich auf der ganzen Seite.

Layout mit Grid

.karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 2rem;
}

Drei Zeilen ergeben ein Kartenlayout, das sich selbst an die verfügbare Breite anpasst – ohne Floats und ohne Media Queries.

Flüssige Schriftgrößen mit clamp()

h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
}

Die Überschrift wächst mit der Bildschirmbreite, ist aber nach unten und oben begrenzt: mindestens 2.4rem, höchstens 4rem. (siehe Lernnugget zu clamp)

Elternelemente auswählen mit :has()

.box:has(img) {
    padding: 0;
}

Diese Regel trifft nur Boxen, die ein Bild enthalten. Früher war so etwas nur mit JavaScript möglich, weil CSS nicht „nach oben“ auswählen konnte.

Verschachtelung (Nesting)

.box {
    padding: 2rem;

    & h2 {
        font-size: 2.4rem;
    }

    &:hover {
        background-color: whitesmoke;
    }
}

Zusammengehörige Regeln stehen gemeinsam in einem Block. Das & steht dabei für den äußeren Selektor, hier also .box.

Woran erkenne ich, ob ich ein Feature nutzen kann?

Weil jedes Modul für sich weiterentwickelt wird, ist die Frage „Welche CSS-Version brauche ich?“ nicht mehr sinnvoll. Wichtiger ist: Wird das Feature von den Browsern unterstützt, die meine Besucher benutzen?

Dafür gibt es hilfreiche Anlaufstellen:

  • MDN Web Docs: Bei jeder Eigenschaft steht die Browserkompatibilität.
  • Can I use: Zeigt für jedes Feature, welche Browserversionen es unterstützen.
  • Baseline: Eine Einstufung, die auf MDN und anderen Seiten angezeigt wird. „Newly available“ heißt: Das Feature läuft in allen wichtigen aktuellen Browsern. „Widely available“ bedeutet: Das gilt schon seit etwa 30 Monaten.

Wenn du dir bei einem Feature unsicher bist, kannst du es außerdem mit @supports absichern. Der Browser wendet den Block dann nur an, wenn er das Feature kennt: 

.box {
    padding: 2rem;
}

@supports selector(:has(*)) {
    .box:has(img) {
        padding: 0;
    }
}

Das Wichtigste in Kürze

  • „CSS3“ ist kein offizieller Standard, sondern ein Sammelbegriff für die Module, die nach CSS 2.1 entstanden sind.
  • CSS wird seitdem in Modulen mit eigenen Levels weiterentwickelt. Eine Version „CSS4“ gibt es nicht.
  • Einen Überblick über den aktuellen Stand geben die CSS Snapshots des W3C.
  • Modernes CSS ist kein offizieller Begriff, beschreibt aber praxisnah, wie CSS heute geschrieben wird: mit Grid, Custom Properties, clamp(), :has() und Co.
  • Ob du ein Feature nutzen kannst, klärst du über MDN, Can I use oder Baseline – nicht über eine Versionsnummer.