CSS-Container-Abfragen

Verwendung von Größen-Container-Abfragen

Während Container-Abfragen Stile basierend auf dem Container-Namen oder Typ anwenden, beziehen sich Größen-Container-Abfragen speziell auf die Abmessungen eines 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 die Abmessungen dieses Containers abfragen möchten. Verwenden Sie dazu die Eigenschaft container-type 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 wird basierend auf den Inline-Abmessungen des Containers durchgeführt. Wendet Layout-, Stil- und Inline-Größencontainment auf das Element an.

normal

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

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 erzeugen:

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

Verwenden Sie anschließend die @container-Regel von @container um eine Container-Abfrage zu definieren. Die Abfrage im folgenden Beispiel wird Stile auf Elemente basierend auf der Größe des nächstgelegenen 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 jedes Mal genau zu wissen, 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 Seite @container.

Benennen von Containment-Kontexten

Im vorherigen Abschnitt wurden Stile basierend auf dem nächstgelegenen Vorfahren mit einem Containment-Kontext angewendet. Es ist möglich, einem Containment-Kontext mit der Eigenschaft container-name einen Namen zu geben. Einmal benannt, kann der Name in einer @container-Abfrage verwendet werden, um einen bestimmten Container anzusprechen. 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-Regel ansprechen:

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

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

Nur namensbasierte Container-Abfragen

Neben der Verwendung eines container-name zusammen mit einem <container-query>, können Sie einen Container nur anhand seines Namens abfragen. Diese sogenannten nur namensbasierten Container-Abfragen ermöglichen die selektive Anwendung von Stilen auf Elemente basierend darauf, ob sie einen Vorfahren mit einem bestimmten container-name haben oder nicht.

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 selektiv nur auf die Elemente in diesem Container Stile 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 zwei <p>-Elemente angewendet werden, nicht jedoch auf das dritte.

Kurzschrift für Container-Syntax

Die Kurzschrift-Methode zum Deklarieren eines Containment-Kontexts besteht darin, die container-Eigenschaft zu verwenden:

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

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

Container-Abfragelängen-Einheiten

Beim Anwenden von Stilen auf die Nachkommen eines Containers mithilfe von Größen-Container-Abfragen (das heißt, dessen container-type auf size oder inline-size gesetzt ist), können Sie Container-Abfragelängen-Einheiten 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 verwendet zu werden, ohne konkrete Längenwerte neu berechnen zu müssen.

Wenn kein geeigneter Container für die Abfrage verfügbar ist, entsprechen die Container-Abfragelängen-Einheiten der Small Viewport Unit für diese Achse (sv*).

Die Container-Abfragelängen-Einheiten 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 cqi oder cqb
• cqmax: Der größere Wert von 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);
  }
}

Weitere Informationen zu diesen Einheiten finden Sie in der Container-Abfragelängen-Einheiten 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 auf dieser Seite verwendete Kartenkomponente zu erzeugen. Das folgende Beispiel verwendet eine grid-template-columns-Deklaration, um ein Zwei-Spalten-Layout für die Kartenkomponente zu erstellen.

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

Wenn Sie ein Einzelspalten-Layout für Geräte mit einem kleineren Viewport verwenden möchten, können Sie eine Media Query verwenden, um das Rastertemplate zu ändern:

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

Siehe auch

• Media Queries
• CSS-@container-Regel
• CSS-contain-Eigenschaft
• CSS-container-Kurzschrift-Eigenschaft
• CSS-container-name-Eigenschaft
• CSS-content-visibility-Eigenschaft
• Verwendung von Containergrößen- und Stilabfragen
• Verwendung von Container-Scroll-Zustandsabfragen
• Verwendung von verankerten Container-Abfragen
• Say Hello to CSS Container Queries von Ahmad Shadeed
• Container Queries: ein schneller Startleitfaden
• Sammlung von Artikeln zu Container-Abfragen