CSS/Media Queries/Container Queries

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.[1]

Screenshot of Container examples

Ahmad Shadeed hat sich schon früh mit Containerabfragen beschäftigt und verfügt über eine wachsende Sammlung von Beispielen, die auf alltäglichen Mustern basieren.[2][3]

Anwendungsbeispiel

Cards sind eines der Entwurfsmuster, die für Container Queries geradezu prädestiniert scheinen. Sie sollen sich nicht nur responsiv über die Seitenbreite verteilen; sondern eben auch je nach verfügbarem Platz ihr Aussehen ändern.

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;
}

.card {
}

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

Das Container-Parent mit der Klasse .card-container erhält mit container-type den Wert inline-size.

Mit .card erhält die Karte selbst (hier nicht dargestellte) Festlegungen.

Mit @container wird nun bei einer Mindestbreite von 40em ein grid erstellt.

container-name

Problematisch wird dies, wenn Sie auf einer Seite mehrere Container erstellen wollen. Hier empfiehlt es sich, dem Container-Parent mit container-name einen Namen zu geben:

container-name zur festen Zuordnung 
.card-container {
  container-type: inline-size;
  container-type: card;
}

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

Mit dem in container-name festgelegten Namen card kann die @container-Abfrage fest mit dem Parent verknüpft werden. Dies schafft Übersicht!

container

container ist die zusammenfassende Eigenschaft von container-type und container-name:

container als zusammenfassende Eigenschaft 
.card-container {
  container: card / inline-size;
}

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

Die container-Eigenschaft erhält als Werte die durch ein / getrennten Namen und Schlüsselwert.

Mehrspaltiges Layout mit CSS Container Queries

Container-Query-Einheiten

Das CSS Containment Module enthält neben den oben besprochenen Eigenschaften auch zahlreiche neue Einheiten. Wer mit den Einheiten vw, vh etc. für Viewports bereits vertraut ist, wird hier wenig Startschwierigkeiten haben.

Schriftgröße abhängig vom Container ändern

<div class="container">
  <div class="card"> … </div>
</div>

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

.card {
  font-size: clamp(1em,6cqi, 3em);
}


Als Wert für font-size wird in der CSS-Funktion clamp() eine variable Schriftgröße mit einer Mindest- und einer Maximalgröße angegeben. Die mittlere Angabe in clamp() legt den Orientierungspunkt fest. Mit 6cqi gestalten wir eine dynamische Schriftgröße auf Grundlage von 6% der Inline-Größe des Containers.

Hauptartikel: CSS/Wertetypen/Maßangaben/Container-Query-Einheiten

Polyfill

Mittlerweile (Stand Mai 2023) werden Container Queries von den letzten Versionen der Browser (Anteil: ca. 86%) unterstützt. Für ältere Versionen können Sie einen Polyfill von Chris Coyier verwenden.[4][5]

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

Container-Einheiten

@-Regeln

Weblinks

Quellen

  1. ↑ Wann Media Queries an ihre Grenzen stoßen im Blog von kulturbanause
  2. ↑ css-tricks: iShadeed’s Container Queries Lab Geoff Graham on Sep 1, 2022
  3. ↑ iShadeed Lab - Container queries
  4. ↑ css-tricks: A New Container Query Polyfill That Just Works vom 06.01.2022
  5. ↑ github: GoogleChromeLabs /container-query-polyfill von surma


deutsch

Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Media_Queries/Container_Queries&oldid=89870“