CSS-Containerabfragen

Containerabfragen testen Elemente basierend auf ihrem Containertyp. Um Größen-Containerabfragen zu verwenden, müssen Sie einen Einschließungskontext auf einem Element deklarieren, damit der Browser weiß, dass Sie möglicherweise später die Abmessungen dieses Containers abfragen möchten. Verwenden Sie dazu die container-type-Eigenschaft mit einem Wert von size, inline-size oder normal.

Diese Werte haben die folgenden Effekte:

size

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

inline-size

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

normal

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

Betrachten Sie das folgende Beispiel eines Kartenkomponents 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 Einschließungskontext mit der container-type-Eigenschaft erstellen:

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

Verwenden Sie anschließend die @container-Regel, um eine Containerabfrage zu definieren. Die Abfrage im folgenden Beispiel wird Stile auf Elemente basierend auf der Größe des nächstgelegenen Vorfahren mit einem Einschließungskontext anwenden. 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 (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

Mit Containerabfragen kann die Karte in mehreren Bereichen einer Seite wiederverwendet werden, ohne zu wissen, wo sie jedes Mal 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 Containerabfragen finden Sie auf der @container-Seite.

Im vorherigen Abschnitt hat eine Containerabfrage Stile basierend auf dem nächstgelegenen Vorfahren mit einem Einschließungskontext angewendet. Es ist möglich, einem Einschließungskontext mit der container-name-Eigenschaft einen Namen zu geben. Sobald ein Name vergeben ist, kann dieser in einer @container-Abfrage verwendet werden, um einen bestimmten Container zu targetieren. Das folgende Beispiel erstellt einen Einschließungskontext mit dem Namen sidebar:

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

Sie können dann diesen Einschließungskontext mit der @container-Regel anvisieren:

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

Weitere Informationen zur Benennung von Einschließungskontexten finden Sie auf der container-name-Seite.

Die Kurzschriftweise, einen Einschließungskontext zu deklarieren, ist die Verwendung der container-Eigenschaft:

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

Weitere Informationen zu dieser Eigenschaft finden Sie in der container-Referenz.

Beim Anwenden von Stilen auf einen Container mithilfe von Containerabfragen können Container-Abfragelängeneinheiten verwendet werden. 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 dass konkrete Längenwerte neu berechnet werden müssen.

Wenn kein geeigneter Container für die Abfrage verfügbar ist, wird die Container-Abfragelängeneinheit standardmäßig auf die kleine Ansichtsfenstereinheit für diese Achse (sv*) gesetzt.

Die Container-Abfragelä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 eines Titels 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 Referenz zu Container-Abfragelängeneinheiten.

Für Browser, die Containerabfragen noch nicht unterstützen, können grid und flex verwendet werden, um einen ähnlichen Effekt für den auf dieser Seite verwendeten Kartenkomponente zu erzeugen. Das folgende Beispiel verwendet eine grid-template-columns-Deklaration, um ein Zweispaltenlayout für die Kartenkomponente zu erstellen.

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

Wenn Sie ein Einspaltenlayout für Geräte mit einem kleineren Ansichtsfenster verwenden möchten, können Sie eine Media Query verwenden, um die Rastervorlage zu ändern:

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

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