CSS-Container-Abfragen

Verwendung von Container-Größen-Abfragen

Während Container-Abfragen Stile basierend auf dem Containernamen oder -typ anwenden, beziehen sich Container-Größen-Abfragen speziell auf die Abmessungen des Containers. Um Container-Größen-Abfragen zu verwenden, müssen Sie einen Containment-Kontext 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-Einschränkung auf den Container an.

inline-size

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

normal

Der Standardwert. Das Element ist kein Abfragecontainer für Container-Größen-Abfragen, kann aber dennoch als Abfragecontainer für nur-namens-Container-Abfragen oder Container-Stil-Abfragen verwendet werden.

Betrachten Sie das folgende Beispiel eines Kartenbausteins 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 wird Stile auf Elemente basierend auf der Größe des nächsten Vorfahren mit einem Containment-Kontext anwenden. Insbesondere 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 dass es erforderlich ist, zu wissen, wo genau 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.

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

Benennung von Containment-Kontexten

Im vorherigen Abschnitt wurden 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 adressieren. 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 ansprechen:

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

Weitere Informationen zum Benennen von Containment-Kontexten finden Sie auf der container-name Seite.

Nur-namens-Container-Abfragen

Neben der Verwendung eines container-name zusammen mit einem <container-query>, können Sie einen Container nur mit seinem Namen abfragen. Diese sogenannten nur-namens-Container-Abfragen ermöglichen es, Stile selektiv auf Elemente anzuwenden, basierend darauf, ob sie einen Vorfahren mit einem bestimmten container-name haben.

Betrachten Sie zum Beispiel das folgende HTML:

<div id="container">
  <p>I'm in the container.</p>
  <p>I'm also in the container.</p>
</div>
<p>I'm not in the container.</p>

Wenn wir dem Container einen Namen zuweisen:

#container {
  container-name: my-container;
}

Können wir dann Stile nur selektiv auf Elemente innerhalb dieses Containers anwenden:

@container my-container {
  p {
    background-color: lime;
    font-size: 1.3rem;
    width: 50vw;
    padding: 0.5rem;
    font-family: sans-serif;
  }
}

In diesem Beispiel würden die angegebenen Stile nur auf die ersten und zweiten <p> Elemente angewendet, nicht jedoch auf das dritte.

Kurzschreibweise bei Container-Syntax

Die Kurzschreibweise zur Deklarierung eines Containment-Kontextes ist die Verwendung der container Eigenschaft:

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

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

Längeneinheiten für Container-Abfragen

Bei der Anwendung von Stilen auf die Nachkommen eines Containers unter Verwendung von Größen-Container-Abfragen (d.h. die container-type ist auf size oder inline-size gesetzt), 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 zu verwenden, ohne dass die konkreten Längenwerte neu berechnet werden müssen.

Wenn kein geeigneter Container für die Abfrage verfügbar ist, ist die Container-Abfrage-Längeneinheit standardmäßig die kleine Viewport-Einheit für diese Achse (sv*).

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 Block-Größ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 zu setzen:

@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.

Fallback-Lösungen 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 den auf dieser Seite verwendeten Kartenkomponenten zu erzielen. 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 einspaltiges Layout für Geräte mit kleinerem Viewport verwenden möchten, können Sie eine Media Query verwenden, 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 Kurzschreibweise
• CSS container-name Eigenschaft
• CSS content-visibility Eigenschaft
• Verwendung von Container-Größen- und Stilabfragen
• Verwendung von Container-Scroll-Zustandsabfragen
• Verwendung von ankerbezogenen Container-Abfragen
• Say Hello to CSS Container Queries von Ahmad Shadeed
• Container Queries: a Quick Start Guide
• Sammlung von Artikeln zu Container-Abfragen