So verwenden Sie Containerabfragen in CSS

Lange Zeit waren Medienabfragen die einzige Möglichkeit, UI-Designs auf verschiedene Bildschirmgrößen reagieren zu lassen. Aber auch das hatte seine Grenzen. Eines der größten Probleme bei der Verwendung von Medienabfragen bestand darin, dass Sie ein Element nur als Reaktion auf Änderungen der Bildschirmgröße formatieren konnten, nicht jedoch das nächstgelegene Containerelement.

Um dieses Problem zu lösen, wurden Containerabfragen eingeführt. Sie haben auch mit der Popularität von Frameworks wie React und Vue.js zugenommen, die durch die Erstellung modularer UI-„Komponenten“ funktionieren. Erfahren Sie, wie Sie Containerabfragen verwenden, um responsive Elemente in Ihrem CSS zu erstellen.

Der in diesem Artikel verwendete Code ist hier verfügbar GitHub-Repository Die Nutzung steht Ihnen unter der MIT-Lizenz kostenlos zur Verfügung.

Warum sollten Sie CSS-Containerabfragen verwenden?

Um die Bedeutung von Containerabfragen zu verstehen, verwenden wir ein Beispiel, das das Verständnis des Konzepts erleichtert. Aber zuerst müssen Sie den Startercode daraus klonen GitHub-Repository.

Sobald Sie das Repo erfolgreich geklont haben, führen Sie den Code aus. Sie finden eine Webseite ähnlich der folgenden Abbildung:

Hier haben Sie ein Rasterlayout mit zwei Spalten: dem Hauptbereich und der Seitenleiste. Der Hauptbereich sieht in Ordnung aus, aber die Seitenleiste (die viel kleiner als der Hauptinhalt ist) sieht etwas gequetscht aus.

Das Layout ist responsiv. Wenn Sie den Browser verkleinern, können Sie sehen, dass sich die Karte in eine vertikale Spalte verwandelt:

Mit anderen Worten: Wenn der Inhalt unleserlich wird, verwandelt sich das Layout in eine vertikale Spalte, in der das Bild über dem Inhalt gestapelt wird. Dieser Effekt entsteht durch die Medienabfragen. Nur so können Sie die Größe von Elementen anhand der gesamten Bildschirmgröße bestimmen.

In diesem Fall stapeln Sie alles übereinander, wenn Ihr Bildschirm weniger als 800 Pixel groß ist Flexbox-Ausrichtung. Auf größeren Bildschirmen platzieren wir die Inhalte nebeneinander:

@Medien(maximale Breite: 800px) {
.Karte {
Flex-Richtung: Spalte;
 }
.card-header { 
Breite: 100%;
 }
}

Lange Zeit waren Medienanfragen eine der Hauptanfragen Prinzipien des Webdesigns zum Erstellen responsiver Layouts mit CSS (und für die meisten Dinge war es gut genug). Aber Sie werden zwangsläufig auf Szenarien stoßen, in denen Medienabfragen einfach nicht ausreichen oder zumindest keine bequeme Lösung darstellen.

Eines dieser Szenarios ist, wenn Sie eine Seitenleiste haben (wie im obigen Beispiel). In diesen Fällen, in denen Sie eine Seitenleiste haben, müssen Sie die Seitenleistenkarte direkt auswählen und versuchen, sie zu verkleinern:

.sidebar.Karte {
/* Seitenleistenkarte verkleinern */
}
@Medien(maximale Breite: 800px) {
/* Gestalte die Seite, wenn der Bildschirm schmaler als 800 Pixel ist */
}

Wenn Sie mit vielen Elementen arbeiten, kann es recht kompliziert sein, da Sie alle Elemente manuell auswählen und ihre Größe ändern müssen. Am Ende hätten Sie mehr Code und zusätzliche Komplexität.

Hier könnten Containerabfragen hilfreich sein. Anstatt gezwungen zu sein, Ihr Ansichtsfenster als Größe zu verwenden, können Sie jedes Element auf Ihrer Seite als Container verwenden. Dann kann dieser Container seine eigenen Breiten haben, auf denen Sie Ihre Medienabfragen basieren würden.

So erstellen Sie eine Containerabfrage

Um eine Containerabfrage zu erstellen, zielen Sie zunächst auf das Element ab, das Sie als Container verwenden möchten (in diesem Fall den Hauptabschnitt und die Seitenleiste). Innerhalb des Blocks müssen Sie Folgendes festlegen Containertyp Zu Inline-Größe:

hauptsächlich, .sidebar {
Containertyp: Inline-Größe
}

Wenn Sie Ihre CSS-Datei speichern, ändert sich nichts an der Seite. Aber jetzt können Sie Containerabfragen verwenden, um die Größe und den Stil der im Hauptabschnitt und im Seitenleistenabschnitt verschachtelten Karten zu ändern. In der folgenden Containerabfrage ändern Sie die Karten auf Bildschirmen mit einer Breite von 500 Pixel oder weniger in vertikale Spalten:

@Container(maximale Breite: 500px) {
.Karte {
Flex-Richtung: Spalte;
 }
.card-header {
Breite: 100%;
 }
}

Dies funktioniert wie eine normale Medienabfrage. Aber anstatt die Größe Ihres Bildschirms zu messen, messen Sie die Größe Ihrer Container (Haupt- und Seitenleistenabschnitte). Wenn Ihr Container nun 500 Pixel oder mehr groß ist, verwenden Sie die horizontale Ansicht. Andernfalls verwenden Sie Vertikal (Standard für Flexbox).

Auf dem Bild oben können Sie erkennen, dass die Seitenleiste eine vertikale Form annimmt, da sie kleiner als 500 Pixel ist. Der Hauptinhalt hingegen behält sein horizontales Layout, da er größer als 500 Pixel ist. Wenn Sie Ihren Browser verkleinern, verwenden Ihre Seitenleiste und Ihr Hauptinhalt beide die vertikale Ausrichtung, wenn sie 500 Pixel oder weniger erreichen.

Die Containerabfrage ist unglaublich leistungsstark, da Sie damit die Größe von Dingen basierend auf dem Container und nicht auf der Basis der gesamten Browserbreite ändern können. Dies ist besonders nützlich beim Umgang mit Komponenten (z. B. in React oder Vue).

Mit Containerabfragen können Sie die Größe Ihrer UI-Komponenten basierend auf ihrem Container einfach ändern und so vollständig eigenständige Komponenten erstellen.

Benennen von Containern

Wenn Sie eine erstellen @Container Bei der Abfrage wird zunächst nach dem Container des Elements gesucht, auf das Sie in der Abfrage abzielen. In unserem Fall wären dies der Hauptcontainer und der Seitenleistencontainer.

Und selbst wenn sich die Karten in einem anderen Behälter befänden, würde es die anderen Behälter einfach ignorieren und nur den Behälter auswählen, der ihm am nächsten liegt. Dies ist Teil eines umfassenderen CSS-Konzept, bekannt als CSS-Selektoren.

Im folgenden Beispiel haben wir das Body-Element in einen Container umgewandelt:

Körper {
Containertyp: Inline-Größe;
}

Jetzt haben wir drei separate Container: Hauptteil, Hauptteil und Nebenteil. Standardmäßig befinden sich die Karten, auf die wir in der Containerabfrage abzielen, näher am Hauptabschnitt oder der Seitenleiste als am Hauptteil. Daher werden die Haupt- und Seitenleistenabschnitte als Container für die Containerabfrage verwendet.

Um dieses Verhalten außer Kraft zu setzen, müssen Sie zwei Dinge tun. Zuerst müssen Sie Ihrem Body-Element einen Containernamen geben:

Körper {
Containertyp: Inline-Größe;
Containername: Körper;
}

Wenn Sie dann Ihre Containerabfrage erstellen, müssen Sie anschließend den Containernamen angeben @Container.

@Container Körper (maximale Breite:1000px){
/* CSS-Regeln, die auf den Body-Container abzielen */
}

Dies ist nützlich, wenn Sie ein bestimmtes Element als Container verwenden möchten und nicht den Container, der dem Zielelement am nächsten liegt. Mit anderen Worten: Sie können einen beliebigen Container auswählen und Ihr Layout optimieren.

Containereinheiten

Ein weiteres großartiges Merkmal von Containern ist, dass Sie Containereinheiten verwenden können. Diese Einheiten funktionieren genau wie Ansichtsfenster-Einheiten (es handelt sich bei allen um den gleichen Einheitentyp). Allerdings werden Containereinheiten verwendet cqw (zum Einstellen der Breite) und cqh (zum Einstellen der Höhe). Diese Einheiten bestimmen die genaue Breite und Höhe Ihres Containers.

Mithilfe von CSS-Containerabfragen können Sie bestimmte Elemente als Referenzpunkte für Ihre Medienabfragen verwenden. Diese Technik ist sehr praktisch, um modulare, in sich geschlossene Elemente zu erstellen, die unabhängig vom Container, in dem sie sich befinden, unabhängig stehen können. Aber Containerabfragen nutzen die gleichen Prinzipien wie Medienabfragen, und das sollten Sie beherrschen, wenn Sie zu den Top-1-Prozent-CSS-Entwicklern gehören wollen.