Moderne CSS Features 2026

CSS hat sich in den letzten Jahren rasant weiterentwickelt. Features, die frueher nur mit JavaScript oder Praeprozessoren moeglich waren, sind jetzt nativ in CSS verfuegbar. In diesem Kapitel lernst du die spannendsten neuen Moeglichkeiten kennen.

CSS Nesting

Endlich: Verschachtelung direkt in CSS — ohne Sass oder Less:

/* Frueher: Flache Selektoren */
.card { padding: 1.5rem; }
.card h2 { color: #1a1a2e; }
.card p { color: #4a5568; }
.card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }

/* Heute: Natives Nesting */
.card {
    padding: 1.5rem;

    & h2 {
        color: #1a1a2e;
    }

    & p {
        color: #4a5568;
    }

    &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    &.featured {
        border: 2px solid #e44d26;
    }

    @media (min-width: 768px) {
        padding: 2rem;
    }
}

Das & steht fuer den aeusseren Selektor. Bei einfachen Nachfahren-Selektoren kannst du es ab 2025 auch weglassen:

.card {
    padding: 1.5rem;

    h2 {
        color: #1a1a2e;
    }
}

Container Queries im Detail

Container Queries sind eine der groessten Neuerungen in der Geschichte von CSS:

/* Container definieren */
.card-wrapper {
    container-type: inline-size;
    container-name: card;
}

/* Kurzschreibweise */
.card-wrapper {
    container: card / inline-size;
}

/* Styles basierend auf Container-Groesse */
.card {
    display: flex;
    flex-direction: column;
}

@container card (min-width: 500px) {
    .card {
        flex-direction: row;
        gap: 1.5rem;
    }

    .card img {
        width: 200px;
        height: auto;
    }
}

@container card (min-width: 800px) {
    .card img {
        width: 300px;
    }

    .card h3 {
        font-size: 1.5rem;
    }
}

Container Query Einheiten

.card-wrapper {
    container-type: inline-size;
}

.card h3 {
    /* cqi = 1% der Container-Inline-Groesse */
    font-size: clamp(1rem, 5cqi, 2rem);
}

.card p {
    font-size: clamp(0.875rem, 3cqi, 1.125rem);
}

Warum Container Queries besser sind als Media Queries

Media Queries	Container Queries
Reagieren auf Viewport	Reagieren auf Container
Komponente kennt ihre Umgebung nicht	Komponente passt sich dem Kontext an
Breakpoints global	Breakpoints pro Komponente
Sidebar + Main brauchen verschiedene Queries	Gleiche Card passt sich ueberall an

Subgrid

Subgrid ermoeglicht Kind-Elementen, die Grid-Linien des Eltern-Grids zu uebernehmen:

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3; /* Card ueberspannt 3 Zeilen */
}

Praktisches Beispiel: Ausgerichtete Cards

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: auto auto 1fr auto; /* Bild, Titel, Text, Button */
    gap: 1.5rem;
}

.card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

/* Jetzt sind Titel, Text und Buttons aller Cards auf gleicher Hoehe! */

Scroll-gesteuerte Animationen

Animationen, die vom Scrollen gesteuert werden — ohne JavaScript:

/* Animation definieren */
@keyframes reveal {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation an Scroll binden */
.scroll-reveal {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
}

/* Fortschrittsbalken basierend auf Scroll-Position */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #e44d26;
    transform-origin: left;
    animation: scaleX linear;
    animation-timeline: scroll();
}

@keyframes scaleX {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

color-mix()

Farben direkt in CSS mischen:

:root {
    --brand: #e44d26;
}

/* Aufhellen */
.light {
    background: color-mix(in srgb, var(--brand), white 30%);
}

/* Abdunkeln */
.dark {
    background: color-mix(in srgb, var(--brand), black 30%);
}

/* Transparent machen */
.overlay {
    background: color-mix(in srgb, var(--brand), transparent 50%);
}

/* Zwei Farben mischen */
.mixed {
    background: color-mix(in srgb, #e44d26 60%, #264de4 40%);
}

/* Verschiedene Farbraeume */
.oklch-mix {
    background: color-mix(in oklch, #e44d26, #264de4);
    /* oklch erzeugt natuerlichere Mischungen */
}

CSS Layers (@layer)

Kontrolliere die Kaskade mit expliziten Schichten:

/* Reihenfolge der Schichten definieren */
@layer reset, base, components, utilities;

/* Reset-Styles */
@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
}

/* Basis-Styles */
@layer base {
    body {
        font-family: system-ui, sans-serif;
        line-height: 1.6;
    }

    h1, h2, h3 {
        line-height: 1.2;
    }
}

/* Komponenten */
@layer components {
    .card {
        padding: 1.5rem;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
    }

    .btn {
        padding: 0.5rem 1.5rem;
        border-radius: 6px;
    }
}

/* Utilities (hoechste Prioritaet) */
@layer utilities {
    .text-center { text-align: center; }
    .mt-4 { margin-top: 1rem; }
    .hidden { display: none; }
}

Popover API mit CSS

Native Popovers ohne JavaScript:

<button popovertarget="info">Info anzeigen</button>
<div id="info" popover>
    <h3>Informationen</h3>
    <p>Das ist ein natives Popover!</p>
</div>

[popover] {
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    max-width: 400px;
}

[popover]::backdrop {
    background: rgba(0, 0, 0, 0.3);
}

/* Animiertes Popover */
[popover] {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s,
                display 0.3s allow-discrete,
                overlay 0.3s allow-discrete;
}

[popover]:popover-open {
    opacity: 1;
    transform: translateY(0);
}

View Transitions

Sanfte Seitenuebergaenge im Browser:

/* Basis View Transition */
::view-transition-old(root) {
    animation: fadeOut 0.3s ease;
}

::view-transition-new(root) {
    animation: fadeIn 0.3s ease;
}

/* Benannte Transitionen fuer bestimmte Elemente */
.hero-image {
    view-transition-name: hero;
}

::view-transition-old(hero) {
    animation: scaleDown 0.3s ease;
}

::view-transition-new(hero) {
    animation: scaleUp 0.3s ease;
}

Relative Farben

Neue Farben basierend auf bestehenden erstellen:

:root {
    --brand: oklch(0.6 0.2 30);
}

.lighter {
    /* Helligkeit erhoehen */
    background: oklch(from var(--brand) calc(l + 0.2) c h);
}

.desaturated {
    /* Saettigung reduzieren */
    background: oklch(from var(--brand) l calc(c - 0.1) h);
}

.complementary {
    /* Komplementaerfarbe */
    background: oklch(from var(--brand) l c calc(h + 180));
}

text-wrap: balance und pretty

/* Gleichmaessig umbrochene Ueberschriften */
h1, h2, h3 {
    text-wrap: balance;
}

/* Schoener Umbruch fuer Absaetze */
p {
    text-wrap: pretty;
    /* Vermeidet "Witwen" (einzelne Woerter in der letzten Zeile) */
}

Uebungen

Uebung 1: Nesting-Praxis

Schreibe ein bestehendes CSS-Stylesheet mit flachen Selektoren um — verwende natives CSS Nesting.

Uebung 2: Container Queries

Erstelle eine Card-Komponente, die in drei verschiedenen Layouts dargestellt wird, basierend auf der Container-Breite (vertikal, horizontal, gross).

Uebung 3: color-mix() Palette

Erstelle eine Farbpalette mit einer einzigen Basisfarbe. Verwende color-mix(), um 5 Abstufungen (von sehr hell bis sehr dunkel) zu erzeugen.

Was kommt als Naechstes?

Im naechsten Kapitel geht es um Semantisches HTML — wie du HTML-Elemente richtig verwendest, um Bedeutung und Struktur auszudruecken:

• Wann welche semantische Tags verwenden
• ARIA-Rollen und -Attribute
• Strukturierte Daten

Zusammenfassung

• CSS Nesting mit & macht verschachtelte Styles nativ moeglich
• Container Queries reagieren auf die Groesse des Containers, nicht des Viewports
• Subgrid laesst Kind-Elemente die Grid-Linien des Elternelements nutzen
• Scroll-gesteuerte Animationen mit animation-timeline: view() brauchen kein JavaScript
• color-mix() mischt Farben direkt in CSS
• @layer gibt dir Kontrolle ueber die Kaskade
• View Transitions ermoeglichen sanfte Seitenuebergaenge
• text-wrap: balance sorgt fuer gleichmaessig umbrochene Ueberschriften

---