CSS-Container-Abfragen

Verwendung von Größen-Container-Abfragen

Während Container-Abfragen Stile basierend auf dem Containertyp anwenden, beziehen sich Größen-Container-Abfragen spezifisch auf die Abmessungen des Containers. Um Größen-Container-Abfragen zu verwenden, müssen Sie einen Containment-Kontext auf einem Element deklarieren, damit der Browser weiß, dass Sie später möglicherweise die Abmessungen dieses Containers abfragen möchten. Dazu verwenden Sie die container-type-Eigenschaft mit einem Wert von size, inline-size oder normal.

Diese Werte haben folgende Auswirkungen:

size

Die Abfrage basiert auf den Inline- und Block- Abmessungen des Containers. Wendet Layout-, Stil- und Größen-Containment auf den Container an.

inline-size

Die Abfrage basiert auf den Inline- Abmessungen des Containers. Wendet Layout-, Stil- und Inline-Größen-Containment auf das Element an.

normal

Das Element ist kein Abfragecontainer für Größen-Container-Abfragen, bleibt jedoch ein Abfragecontainer für Stil-Container-Abfragen.

Betrachten Sie das folgende Beispiel eines Kartenkomponenten für einen Blogbeitrag mit einem Titel und etwas Text:

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

Sie können einen Containment-Kontext mit der container-type-Eigenschaft erstellen:

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

Verwenden Sie anschließend die @container-At-Regel, um eine Container-Abfrage zu definieren. Die Abfrage im folgenden Beispiel wendet Stile auf Elemente basierend auf der Größe des nächstgelegenen Vorfahren mit einem Containment-Kontext an. Konkret wird diese Abfrage eine größere Schriftgröße für den Kartentitel anwenden, wenn der Container breiter als 700px ist:

/* Default heading styles for the card title */
.card h2 {
  font-size: 1em;
}

/* If the container is larger than 700px */
@container (width > 700px) {
  .card h2 {
    font-size: 2em;
  }
}

Mit Container-Abfragen kann die Karte in mehreren Bereichen einer Seite wiederverwendet werden, ohne jedes Mal genau wissen zu müssen, wo sie platziert wird. Wenn der Container mit der Karte schmaler als 700px ist, wird die Schrift des Kartentitels klein sein, und wenn die Karte sich in einem Container befindet, der breiter als 700px ist, wird die Schrift des Kartentitels größer sein.

Für weitere Informationen zur Syntax von Container-Abfragen siehe die @container-Seite.

Benennung von Containment-Kontexten

Im vorherigen Abschnitt hat eine Container-Abfrage Stile basierend auf dem nächstgelegenen Vorfahren mit einem Containment-Kontext angewendet. Es ist möglich, einem Containment-Kontext einen Namen zu geben, indem die container-name-Eigenschaft verwendet wird. Einmal benannt, kann der Name in einer @container-Abfrage verwendet werden, um einen bestimmten Container zu zielen. Das folgende Beispiel erstellt einen Containment-Kontext mit dem Namen sidebar:

.post {
  container-type: inline-size;
  container-name: sidebar;
}

Sie können dann diesen Containment-Kontext mit der @container-At-Regel ansteuern:

@container sidebar (width > 700px) {
  .card {
    font-size: 2em;
  }
}

Weitere Informationen zur Benennung von Containment-Kontexten finden Sie auf der container-name-Seite.

Kurzschriftsyntax für Container

Die Kurzschriftsyntax zur Deklaration eines Containment-Kontextes ist die container-Eigenschaft:

.post {
  container: sidebar / inline-size;
}

Für weitere Informationen zu dieser Eigenschaft siehe die container-Referenz.

Längeneinheiten für Container-Abfragen

Beim Anwenden von Stilen auf einen Container mittels Container-Abfragen können Sie Container-Abfrage-Längeneinheiten verwenden. Diese Einheiten geben eine Länge relativ zu den Abmessungen eines Abfragecontainers an. Komponenten, die Längeneinheiten relativ zu ihrem Container verwenden, sind flexibler in verschiedenen Containern einsetzbar, ohne konkrete Längenwerte neu berechnen zu müssen.

Wenn kein geeigneter Container für die Abfrage verfügbar ist, wird die Container-Abfrage-Längeneinheit auf die kleine Ansichtsfenstereinheit für diese Achse (sv*) voreingestellt.

Die Container-Abfrage-Längeneinheiten sind:

• cqw: 1% der Breite eines Abfragecontainers
• cqh: 1% der Höhe eines Abfragecontainers
• cqi: 1% der Inline-Größe eines Abfragecontainers
• cqb: 1% der Blockgröße eines Abfragecontainers
• cqmin: Der kleinere Wert von entweder cqi oder cqb
• cqmax: Der größere Wert von entweder cqi oder cqb

Das folgende Beispiel verwendet die cqi-Einheit, um die Schriftgröße einer Überschrift basierend auf der Inline-Größe des Containers festzulegen:

@container (width > 700px) {
  .card h2 {
    font-size: max(1.5em, 1.23em + 2cqi);
  }
}

Für weitere Informationen zu diesen Einheiten siehe die Container-Abfrage-Längeneinheiten-Referenz.

Fallbacks für Container-Abfragen

Für Browser, die Container-Abfragen noch nicht unterstützen, können grid und flex verwendet werden, um einen ähnlichen Effekt für die hier benutzte Kartenkomponente zu erstellen. Das folgende Beispiel nutzt eine grid-template-columns-Deklaration, um ein zweispaltiges Layout für die Kartenkomponente zu erstellen.

.card {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

Wenn Sie ein einspaltiges Layout für Geräte mit kleinerem Ansichtsfenster verwenden möchten, können Sie eine Media Query nutzen, um die Rastervorlage zu ändern:

@media (width <= 700px) {
  .card {
    grid-template-columns: 1fr;
  }
}

Siehe auch

• Media Queries
• CSS @container-At-Regel
• CSS contain-Eigenschaft
• CSS container-Kurzschrift-Eigenschaft
• CSS container-name-Eigenschaft
• CSS content-visibility-Eigenschaft
• Verwendung von Größen- und Stil-Container-Abfragen
• Verwendung von Scroll-Status-Container-Abfragen
• Say Hello to CSS Container Queries von Ahmad Shadeed
• Container Queries: a Quick Start Guide
• Sammlung von Container-Abfrage-Artikeln