CSS/Media Queries/Container Queries

Text-Info

10min

mittel

• CSS/Media Queries
•

Während Medienabfragen eine Methode zur Abfrage von Aspekten des Browsers oder der Geräteumgebung bieten, in der ein Dokument angezeigt wird (z. B. Abmessungen des Viewports oder Benutzereinstellungen), ermöglichen Containerabfragen das Testen von Aspekten von Elementen innerhalb des Dokuments (z. B. Rahmenabmessungen oder berechnete Stile).

Ein Abfragecontainer wird durch die Angabe der möglichen Abfragetypen unter Verwendung der Eigenschaft container-type (oder der shorthand container) erstellt. Stilregeln, die auf seine Nachkommen angewendet werden, können dann durch Abfragen mit der bedingten Gruppenregel @container konditioniert werden.

Browserunterstützung

caniuse.com

Einsatz

Bei der Erstellung eines responsiven Designs verwenden Sie häufig eine Medienabfrage, um das Layout des Dokuments auf der Grundlage der Viewportbreite zu ändern.

Viele Designs haben jedoch gemeinsame Komponenten, die das Layout in Abhängigkeit von der verfügbaren Breite ihres Containers ändern. Dies muss sich nicht immer auf den Viewport beziehen, sondern auch darauf, wo im Layout die Komponente platziert ist.

container

Ein Container für eine Visitenkarte

.card-container {
  contain: layout inline-size;
  width: 100%;
}

container-type

Durch Hinzufügen der Eigenschaft container-type mit einem Größenwert wird ein containment-context für dieses Element erstellt. Das bedeutet, dass der Browser weiß, dass wir diesen Container später abfragen wollen. Sie können dann eine Abfrage schreiben, die sich auf diesen Containment-Kontext bezieht und nicht auf die Viewport-Größe, um Layout-Entscheidungen für eine Komponente zu treffen.

Eine Container-Abfrage wird mit @container erstellt. Damit wird der nächstgelegene containment-context abgefragt. Um die Karte nur dann zweispaltig darzustellen, wenn die Seitenleiste breiter als 40em ist, verwenden wir das folgende CSS:

container-type

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

@container (min-width: 40em){
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Polyfill

Chris Coyier stellt einen Polyfill vor, der trotz mangelnder Browserunterstützung bereits alle Funktionalitäten ermöglicht. So kann heute schon mit Container Queries experimentiert werden.

• GoogleChromeLabs auf github: container-query-polyfill von surma

Laden des Polyfills

// Support Test
const supportsContainerQueries = "container" in document.documentElement.style;

// Conditional Import
if (!supportsContainerQueries) {
  import("https://cdn.skypack.dev/container-query-polyfill");
}

Siehe auch

Eigenschaften

• contain
• container
  • container-type
  • container-name
• content-visibility

Container-Einheiten

• cqw
• cqh
• cqi
• cqb
• cqmin - cqmax

@-Regeln

• @container

Weblinks

Quellen

• csswg: CSS Containment Module Level 3
• MDN: CSS Container Queries
• css-tricks: Next Gen CSS: @container Una Kravets, May 11, 2021
• ishadeed.com: CSS Container Query Units vom 18.09.2021
• smashing-magazine: A Primer On CSS Container Queries Stephanie Eckles, 11.05.2021

deutsch

• kulturbanause: CSS Container Queries mit @container