CSS Container Queries: Component-basierte Responsive Design ohne Media Queries

CSS Container Queries: Component-basiertes Responsive Design

CSS Container Queries sind eine der wichtigsten Neuerungen im modernen Webdesign seit der Einführung von Flexbox und Grid. Während Media Queries auf Viewport-Größe reagieren, ermöglichen Container Queries, dass Komponenten auf ihre Container-Größe reagieren. Dies revolutioniert Component-basiertes Design, weil Komponenten jetzt unabhängig von ihrer Position auf der Seite responsive sein können.

Das Problem mit Media Queries ist, dass sie Viewport-basiert sind. Eine Komponente, die in einer Sidebar erscheint, hat dieselbe Größe wie eine Komponente im Hauptbereich, obwohl die Sidebar viel schmaler ist. Container Queries lösen dies, indem sie es Komponenten ermöglichen, auf ihre tatsächliche Container-Größe zu reagieren, nicht auf die Viewport-Größe.

Container Queries sind besonders wertvoll für Design Systems und Component Libraries, wo Komponenten in verschiedenen Kontexten wiederverwendet werden. Eine Card-Komponente kann sich automatisch anpassen, ob sie in einer engen Sidebar oder in einem breiten Hauptbereich erscheint, ohne dass verschiedene Varianten erstellt werden müssen.

Wie Container Queries funktionieren

Container Queries funktionieren in zwei Schritten:

1. Container definieren: Ein Element wird als Container definiert, indem container-type oder container gesetzt wird. Dies macht das Element zu einem Query-Container.

2. Container Query verwenden: Mit @container können Styles basierend auf der Container-Größe angewendet werden, ähnlich wie @media, aber basierend auf Container statt Viewport.

Grundlegende Syntax:

css
.card-container {
    container-type: inline-size;
    /* oder kurz: container: inline-size; */
}

.card {
    /* Standard-Styles */
}

@container (min-width: 400px) {
    .card {
        /* Styles für Container >= 400px */
    }
}

Container-Typen

inline-size: Der Container reagiert auf die Inline-Dimension (Breite in horizontalen Schreibmodi). Dies ist der häufigste Fall für responsive Komponenten.

block-size: Der Container reagiert auf die Block-Dimension (Höhe). Weniger häufig verwendet, aber nützlich für vertikale Layouts.

size: Der Container reagiert auf beide Dimensionen. Nützlich für komplexe Layouts, aber mit höherem Performance-Overhead.

normal: Standard-Wert. Der Container ist kein Query-Container.

Container-Name: Container können benannt werden, um spezifische Queries zu ermöglichen:

css
.sidebar {
    container-type: inline-size;
    container-name: sidebar;
}

@container sidebar (min-width: 300px) {
    /* Nur für .sidebar Container */
}

Praktische Anwendungsfälle

Card-Komponenten: Cards können sich automatisch anpassen, ob sie in einer engen Sidebar oder einem breiten Grid erscheinen:

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

.card {
    display: flex;
    flex-direction: column;
}

@container (min-width: 400px) {
    .card {
        flex-direction: row;
    }
}

Navigation: Navigation kann zwischen horizontal und vertikal wechseln, basierend auf verfügbarem Platz:

css
.nav-container {
    container-type: inline-size;
}

.nav {
    display: flex;
    flex-direction: column;
}

@container (min-width: 600px) {
    .nav {
        flex-direction: row;
    }
}

Grid-Layouts: Grid-Spalten können sich automatisch anpassen:

css
.grid-container {
    container-type: inline-size;
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
}

@container (min-width: 500px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container (min-width: 800px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

Container Query Units

Container Queries führen neue Einheiten ein, die relativ zum Container sind:

cqw / cqh: Container Query Width / Height. 1cqw ist 1% der Container-Breite.

cqi / cqb: Container Query Inline / Block. 1cqi ist 1% der Inline-Dimension.

cqmin / cqmax: Kleinere / Größere der beiden Container-Dimensionen.

Beispiel:

css
.card {
    padding: 2cqw; /* Padding relativ zur Container-Breite */
    font-size: clamp(1rem, 4cqw, 1.5rem);
}

Layout Shifts vermeiden

Container Queries können helfen, Cumulative Layout Shift (CLS) zu reduzieren, eine der Core Web Vitals. Indem Komponenten sich basierend auf Container-Größe anpassen, können Layout-Shifts vermieden werden, die durch Viewport-Änderungen verursacht werden.

Problem mit Media Queries: Bei Media Queries kann eine Komponente ihr Layout ändern, wenn der Viewport sich ändert, auch wenn der Container sich nicht geändert hat. Dies kann zu Layout Shifts führen.

Lösung mit Container Queries: Container Queries reagieren nur auf Container-Änderungen, nicht auf Viewport-Änderungen. Dies reduziert unnötige Layout-Shifts.

Best Practice: Kombinieren Sie Container Queries mit aspect-ratio und object-fit, um Layout Shifts zu vermeiden:

css
.image-container {
    container-type: inline-size;
    aspect-ratio: 16 / 9;
}

.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Browser-Unterstützung

Container Queries werden von modernen Browsern unterstützt (Chrome 105+, Firefox 110+, Safari 16+). Für ältere Browser können Polyfills verwendet werden, oder Media Queries als Fallback.

Feature Detection:

css
@supports (container-type: inline-size) {
    /* Container Query Styles */
}

@supports not (container-type: inline-size) {
    /* Fallback mit Media Queries */
}

Kombination mit anderen Features

Container Queries + Grid: Container Queries funktionieren hervorragend mit CSS Grid, um responsive Grid-Layouts zu erstellen, die sich an Container-Größe anpassen.

Container Queries + Custom Properties: Kombinieren Sie Container Queries mit CSS Custom Properties für dynamische, responsive Designs:

css
.card-container {
    container-type: inline-size;
    --columns: 1;
}

@container (min-width: 500px) {
    .card-container {
        --columns: 2;
    }
}

.grid {
    grid-template-columns: repeat(var(--columns), 1fr);
}

Container Queries + clamp(): Kombinieren Sie Container Queries mit clamp() für fluid Typography, die sich an Container-Größe anpasst:

css
@container (min-width: 300px) {
    .text {
        font-size: clamp(1rem, 5cqw, 2rem);
    }
}

Häufige Fehler

Vergessen, Container zu definieren: Container Queries funktionieren nur, wenn ein Element als Container definiert ist. Vergessen Sie nicht, container-type zu setzen.

Falsche Container-Typen: Verwenden Sie inline-size für horizontale Layouts, nicht size, es sei denn, Sie benötigen beide Dimensionen.

Zu viele Container: Nicht jedes Element muss ein Container sein. Definieren Sie Container nur, wo nötig, um Performance zu optimieren.

Vergessen von Fallbacks: Stellen Sie sicher, dass Fallbacks für Browser ohne Container Query-Unterstützung vorhanden sind.

Best Practices

Verwenden Sie Container Queries für Komponenten: Container Queries sind ideal für wiederverwendbare Komponenten, die in verschiedenen Kontexten erscheinen.

Kombinieren Sie mit Media Queries: Container Queries ersetzen Media Queries nicht vollständig. Verwenden Sie Media Queries für Viewport-basierte Layouts, Container Queries für Component-basierte Layouts.

Optimieren Sie Performance: Verwenden Sie inline-size statt size, wenn möglich, für bessere Performance.

Testen Sie in verschiedenen Kontexten: Testen Sie Komponenten in verschiedenen Container-Größen, um sicherzustellen, dass sie korrekt funktionieren.