CSS Container-Abfragen

Während Container-Abfragen Stile basierend auf dem Containertyp anwenden, wenden Größen-Container-Abfragen Stile speziell basierend auf den Abmessungen des Containers an. Um Größen-Container-Abfragen zu nutzen, müssen Sie einen Containment-Kontext für ein Element deklarieren, damit der Browser weiß, dass Sie möglicherweise später 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- Dimensionen des Containers. Wendet Layout-, Stil- und Größen-Einschränkungen auf den Container an.

inline-size

Die Abfrage basiert auf den Inline- Dimensionen des Containers. Wendet Layout-, Stil- und Inline-Größen-Einschränkungen auf das Element an.

normal

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

Betrachten Sie das folgende Beispiel eines Kartenkomponenten für einen Blogeintrag 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 wird Stile für Elemente basierend auf der Größe des nächsten Vorfahren mit einem Containment-Kontext anwenden. Speziell 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 (min-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 in einem Container ist, der breiter als 700px ist, wird die Schrift des Kartentitels größer sein.

Weitere Informationen zur Syntax von Container-Abfragen finden Sie auf der @container Seite.

Im vorherigen Abschnitt hat eine Container-Abfrage Stile basierend auf dem nächsten 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 anvisieren:

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

Weitere Informationen zur Benennung von Containment-Kontexten sind auf der container-name Seite verfügbar.

Die Kurzschreibweise zur Deklaration eines Containment-Kontexts ist die Verwendung der container Eigenschaft:

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

Weitere Informationen zu dieser Eigenschaft finden Sie im container Referenz.

Beim Anwenden von Stilen auf einen Container mit Container-Abfragen können Sie Container-Abfrage-Längeneinheiten verwenden. Diese Einheiten spezifizieren eine Länge relativ zu den Abmessungen eines Abfrage-Containers. Komponenten, die Längeneinheiten relativ zu ihrem Container verwenden, sind flexibler in unterschiedlichen Containern zu verwenden, 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 standardmäßig auf die kleine Ansichtsfenstereinheit für diese Achse (sv*) festgelegt.

Die Container-Abfrage-Längeneinheiten sind:

• cqw: 1% der Breite eines Abfrage-Containers
• cqh: 1% der Höhe eines Abfrage-Containers
• cqi: 1% der Inline-Größe eines Abfrage-Containers
• cqb: 1% der Blockgröße eines Abfrage-Containers
• 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 eines Headings basierend auf der Inline-Größe des Containers festzulegen:

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

Weitere Informationen zu diesen Einheiten finden Sie in der Container query length units Referenz.

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 verwendete Kartenkomponente zu erzeugen. Das folgende Beispiel verwendet 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 einkolumniges Layout für Geräte mit einem kleineren Ansichtsfenster verwenden möchten, können Sie eine Media-Abfrage verwenden, um das Gitter-Template zu ändern:

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

• Media-Abfragen
• CSS @container At-Regel
• CSS contain Eigenschaft
• CSS container Kurzschreibweise
• CSS container-name Eigenschaft
• CSS content-visibility Eigenschaft
• Verwendung von Größen- und Stilcontainer-Abfragen
• Verwendung von Scroll-Status-Container-Abfragen
• Say Hello to CSS Container Queries von Ahmad Shadeed
• Container-Abfragen: ein Schnellstart-Leitfaden
• Sammlung von Container-Abfrage-Artikeln