Hallo zu CSS Container Queries

Container Queries sind endlich da! Jetzt hinter einem Flag in der neuesten Version von Chrome Canary verfügbar, können Sie nach Herzenslust experimentieren. Oh, und wenn Sie mit Container Queries nicht vertraut sind, dann schauen Sie sich diesen Beitrag von Ethan Marcotte an, warum sie so verdammt wichtig sind.

Ahmad Shadeed beschrieb seine Aufregung und zeigte eine Menge großartiger Anwendungsfälle für Probleme, die Container Queries lösen.

Ich habe mich seit sechs Jahren, die ich als Frontend-Entwickler tätig bin, nicht mehr so ​​auf eine CSS-Funktion gefreut wie jetzt. Der Prototyp von Container Queries ist jetzt hinter einem Flag in Chrome Canary verfügbar. Dank der Bemühungen von klugen Leuten wie Miriam Suzanne und anderen.

Ich erinnere mich, viele Witze über die Unterstützung für CSS Container Queries gesehen zu haben, aber sie sind endlich da.

Sobald Sie die Funktion in chrome://flags aktiviert haben, können Sie Code wie diesen schreiben.

.parent {
  container: layout inline-size;
}

@container (min-width: 400px) {
  .child {
    display: flex;
    flex-wrap: wrap;
  }
}

Zuerst müssen Sie der übergeordneten Komponente mitteilen, dass ein Kind seine Größe ändern muss (das ist der Teil container: layout inline-size). Als nächstes können Sie eine neue Art von Abfrage namens @container verwenden, die erkennt, wenn sich die Breite des übergeordneten Elements eines Elements ändert.

Andy Bell hat auch eine Reihe großartiger Beispiele erstellt, als er argumentierte, dass wir oft möchten, dass sich Elemente basierend auf der Größe des übergeordneten Elements ändern und nicht auf der Breite des Browserfensters, insbesondere wenn es um Typografie geht.

Am wichtigsten ist, dass wir mit Container Queries Typografie kontextbezogen einstellen können! Das ist für mich die am meisten benötigte Funktion bei der Implementierung von Designsystemen und der Grund, warum ich mir ständig Container Queries gewünscht habe. Wir können mit Media Queries reagieren und Schriftgrößen usw. auf diese Weise einstellen, aber wenn man keine Ahnung hat, wo ein Element landen wird, ist das kein idealer Ansatz. Jetzt, da wir Container Queries haben, können wir Typografieanpassungen vornehmen, die tatsächlich Sinn ergeben, viel einfacher als zuvor.

Dieser Beitrag erinnert mich daran, dass Miriam Suzanne einen ausgezeichneten Vorschlag gemacht hat, in dem Sie mehr darüber lesen können, wie Container Queries entworfen wurden und welche Schwierigkeiten und Probleme dabei aufgetreten sind. Es ist so schön, ein solches Dokument zu sehen, das zeigt, wie CSS öffentlich verbessert wird.

Persönlich glaube ich, dass dies die größte Verbesserung für CSS seit Grid ist. Es eröffnet alle Arten von eleganten Lösungen für Probleme, mit denen wir täglich umgehen. Ich bin gerade neulich auf ein Problem gestoßen, als ich den Typ eines Elements in einer Seitenleiste basierend auf der Breite des umgebenden Elements festlegen wollte. Und verdammt – das war ohne eine Reihe seltsamer Hacks einfach nicht möglich!

Container Queries sind jetzt keine ferne Spinnerei mehr. Sie sind gekommen, um zu bleiben.

Direkter Link →