Die Vorteile von CSS-Containerabfragen nutzen: Erkenntnisse vom Netflix-Team

Jeremy Weeks
Jeremy Weeks
Stefan Heymanns
Stefan Heymanns

Containerabfragen haben die Herangehensweise von Entwicklern an responsives Design revolutioniert. Das Netflix-Team hat aus erster Hand erfahren, wie stark sie die Entwicklung optimieren, die Flexibilität verbessern und die Leistung steigern können. In diesem Beitrag werden die wichtigsten Vorteile von Containerabfragen erläutert und mit älteren Methoden verglichen, insbesondere solchen, die für die Layoutsteuerung auf JavaScript basieren. Es enthält Codebeispiele, die die einzelnen Punkte veranschaulichen und zeigen, wie Containerabfragen Ihnen als Entwickler das Leben erleichtern können.

1. Vereinfachtes Komponentendesign, Bottom-Up- und Top-Down-Design

Eine der wichtigsten Veränderungen, die das Netflix-Team erlebte, war der Wechsel von einem „Top-Down“-Designansatz zu einem „Bottom-Up“-Ansatz. Vor Containerabfragen mussten die übergeordneten Container die Layoutanforderungen ihrer untergeordneten Container genau kennen. Bei Containerabfragen ist das umgekehrt: Untergeordnete Komponenten können ihr Layout basierend auf der Größe ihres eigenen Containers steuern. Dadurch wird die Rolle des übergeordneten Elements vereinfacht und die Layoutlogik im Code reduziert.

Beispiel: Containerabfragen im Vergleich zu Medienabfragen und JavaScript

Vorher (JavaScript erforderlich):

/* Layout with media queries */
.card {
    width: 100%;
}

@media (min-width: 600px) {
    .card {
        width: 50%;
    }
}

@media (min-width: 900px) {
    .card {
        width: 33.33%;
    }
}
// JavaScript to detect parent container size
const container = document.querySelector('.container');
const card = document.querySelector('.card');

function adjustLayout() {
    if (window.innerWidth >= 900) {
        card.style.width = '33.33%';
    } else if (window.innerWidth >= 600) {
        card.style.width = '50%';
    } else {
        card.style.width = '100%';
    }
}

window.addEventListener('resize', adjustLayout);
adjustLayout();

Nachher

/* Container Query */
.container {
    container-type: inline-size;
}

.card {
    width: 100%;
}

@container (min-width: 600px) {
    .card {
        width: 50%;
    }
}

@container (min-width: 900px) {
    .card {
        width: 33.33%;
    }
}

In diesem Beispiel wird gezeigt, dass der übergeordnete Container das untergeordnete Layout nicht mehr verwalten muss. Mit der @container-Regel kann der .card auf die Größe seines unmittelbaren Containers reagieren, wodurch die Layoutlogik vereinfacht und JavaScript vollständig überflüssig wird.

2. Responsives Webdesign ohne komplexe Medienabfragen

Das Netflix-Team hat herausgefunden, wie Containerabfragen die Responsivität vereinfachen, insbesondere bei einem Mobile-first-Design. Anstatt komplexe Medienabfragen zu schreiben, können Sie wiederverwendbare Komponenten erstellen, die sich an die Größe des Containers anpassen. So sind dynamische Layouts für verschiedene Bildschirmgrößen und Geräte möglich. Das ist besonders nützlich für Apps wie Netflix, bei denen der mobile Traffic dominiert.

Beispiel: Komponentenreaktionsfähigkeit mit Containerabfragen

Vorher

/* Desktop versus Mobile
this only works if.sidebar is directly contained by a viewport-width element */
.sidebar {
    width: 300px;
}

@media (max-width: 768px) {
    .sidebar {
        width: 100%;
    }
}

Nachher

/* Responsive sidebar based on container,
.sidebar can be placed in any element of any width */
.container {
    container-type: inline-size;
}

.sidebar {
    width: 100%;
}

@container (min-width: 768px) {
    .sidebar {
        width: 300px;
    }
}

Anstatt von viewportbasierten Mediaabfragen abhängig zu sein, reagiert das .sidebar jetzt auf die Containergröße. So kann es sich natürlicher an dynamische Layouts anpassen, ohne dass die Größe des Viewports oder des übergeordneten Containers bekannt sein muss.

3. Verringerte Abhängigkeit von JavaScript für die Layoutverwaltung

Vor Containerabfragen mussten viele Teams, darunter Netflix, JavaScript für dynamische Layouts verwenden. Durch die Abfrage der Fenstergröße würde JavaScript Layoutänderungen auslösen, was sowohl die Komplexität als auch das Risiko von Fehlern erhöht. Containerabfragen machen dies unnötig, da CSS die Layout-Resilienz basierend auf der Containergröße verwalten kann.

Beispiel: JavaScript-basierte Layoutlogik entfernen

Vorher

const cardContainer = document.querySelector('.card-container');
const cards = cardContainer.children;

function adjustLayout() {
    if (cardContainer.offsetWidth > 900) {
        cards.forEach(card => card.style.width = '33.33%');
    } else if (cardContainer.offsetWidth > 600) {
        cards.forEach(card => card.style.width = '50%');
    } else {
        cards.forEach(card => card.style.width = '100%');
    }
}

window.addEventListener('resize', adjustLayout);
adjustLayout();

Nachher

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

.card {
    width: 100%;
}

@container (min-width: 600px) {
    .card {
        width: 50%;
    }
}

@container (min-width: 900px) {
    .card {
        width: 33.33%;
    }
}

Dadurch wird nicht nur die benötigte JavaScript-Menge reduziert, sondern auch die Leistung verbessert, da Laufzeitberechnungen vermieden werden.

4. Weniger Code, weniger Fehler

Das Netflix-Team stellte fest, dass die Verwendung von Containerabfragen zu weniger Codezeilen und weniger layoutbezogenen Fehlern führte. Durch die Verlagerung der Layoutlogik von JavaScript in CSS und die Beseitigung der Notwendigkeit komplexer Medienabfragen können Entwickler Code schreiben, der leichter zu pflegen ist.

Beispiel: Layoutcode reduzieren

Das Netflix-Team stellte fest, dass nach der Einführung von Containerabfragen der CSS-Code deutlich reduziert wurde – bei bestimmten Komponenten um bis zu 30 %. Gleichzeitig konnte das Team viele komplexe und manchmal konfliktanfällige Mediaabfragen vereinfachen, indem es die Logik entfernte, die die untergeordneten Komponenten steuerte. So konnte eine bessere Trennung der Aufgabenbereiche erreicht werden. Diese Reduzierung beschleunigt nicht nur die Entwicklung, sondern minimiert auch potenzielle Fehlerquellen, was zu weniger Fehlern führt.

Vorher

/* Before with complex media queries */
.card {
    width: 100%;
}

@media (min-width: 600px) {
    .card {
        width: 50%;
    }
}

@media (min-width: 900px) {
    .card {
        width: 33.33%;
    }
}

Nachher

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

.card {
    width: 100%;
}

@container (min-width: 600px) {
    .card {
        width: 50%;
    }
}

@container (min-width: 900px) {
    .card {
        width: 33.33%;
    }
}

5. Für die Entwicklung optimiert

bq. „Das hat mir das Leben um ein Vielfaches erleichtert.“

Einer der am wenigsten geschätzten Vorteile von Containerabfragen ist die verbesserte Entwicklerfreundlichkeit. Durch ein intuitiveres, komponentenorientiertes Verhalten von CSS können sich Entwickler darauf konzentrieren, wiederverwendbare, flexible Komponenten zu erstellen, ohne sich Gedanken darüber machen zu müssen, wie sie sich in jedem möglichen Layout verhalten.

Wie ein Mitglied des Netflix-Teams sagte: „So hätte CSS von Anfang an funktionieren sollen.“

6. Polyfill-Fallback

Containerabfragen sind zwar jetzt in allen gängigen Browsern verfügbar, aber es gibt Bedenken hinsichtlich älterer Browserversionen, die noch verwendet werden. Ein Fallback ist sehr wichtig. Das Netflix-Team verwendet diese JavaScript-Polyfill, die von Mitgliedern der Web-Community erstellt wurde. Die Implementierung ist mit der Feature-Erkennung ganz einfach:

if (! CSS.supports("container-type:size")) {
  /*use polyfill from
  https://www.npmjs.com/package/container-query-polyfill */
 }

Fazit

Containerabfragen sind ein großer Schritt vorwärts in CSS. Sie erleichtern Entwicklern das Erstellen flexibler, responsiver Komponenten, die in verschiedenen Bereichen einer Website wiederverwendet werden können. Da sie den Einsatz von JavaScript für das Layout reduzieren, komplexe Medienabfragen eliminieren und die Entwicklung beschleunigen, bieten sie sowohl in Bezug auf die Leistung als auch die Wartbarkeit erhebliche Vorteile. Derzeit sind die meisten Anwendungsfälle auf den Tudum-Seiten von Netflix zu finden. Es ist aber geplant, Containerabfragen auch in anderen Teilen von Netflix zu verwenden. Das Netflix-Team betrachtet Containerabfragen als erstklassiges Tool in der Entwickler-Toolbox. Die Nutzung wird sich nur noch ausweiten, da immer mehr Entwickler die Flexibilität und Leistung nutzen. Egal, ob Sie vorhandene Komponenten nachrüsten oder ganz neue entwerfen: Containerabfragen bieten einen einfacheren, klareren Weg für responsives Design.

Wenn Sie Containerabfragen noch nicht ausprobiert haben, sollten Sie es tun. Sie werden feststellen, dass sich Ihr Workflow auf unerwartete Weise vereinfacht.