CSS-Containerabfragen

Verwendung von Containergrößenabfragen

Während Containerabfragen Stile basierend auf dem Containertyp anwenden, wenden Containergrößenabfragen Stile spezifisch basierend auf den Abmessungen des Containers an. Um Containergrößenabfragen zu verwenden, müssen Sie einen Einschließungskontext auf einem Element deklarieren, damit der Browser weiß, dass Sie später die Abmessungen dieses Containers abfragen möchten. Um dies zu tun, 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-Einschließung auf den Container an.

inline-size

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

normal

Das Element ist kein Abfragecontainer für Containergrößenabfragen, bleibt jedoch ein Abfragecontainer für Containerstilabfragen.

Betrachten Sie das folgende Beispiel eines Kartenkomponenten für einen Blogartikel 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 Eigenschaft container-type erstellen:

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

Als nächstes verwenden Sie die @container At-Regel, um eine Containerabfrage zu definieren. Die Abfrage im folgenden Beispiel wendet Stile auf Elemente basierend auf der Größe des nächsten Vorfahren mit einem Einschließungskontext an. Genauer gesagt, 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 Containerabfragen kann die Karte in mehreren Bereichen einer Seite wiederverwendet werden, ohne genau 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.

Für weitere Informationen zur Syntax von Containerabfragen siehe die @container Seite.

Benennung von Einschließungskontexten

Im vorherigen Abschnitt hat eine Containerabfrage Stile basierend auf dem nächsten Vorfahren mit einem Einschließungskontext angewendet. Es ist möglich, einem Einschließungskontext einen Namen zu geben, indem man die container-name Eigenschaft verwendet. Einmal benannt, kann der Name in einer @container Abfrage verwendet werden, um einen bestimmten Container anzusprechen. 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 At-Regel ansprechen:

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

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

Kurzsyntax für Container

Die Kurzform zur Deklaration eines Einschließungskontextes ist die Verwendung der Eigenschaft container:

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

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

Container-Abfragelängeneinheiten

Wenn Sie Stile auf einen Container mithilfe von Containerabfragen anwenden, können Sie Container-Abfragelä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, fällt die Container-Abfragelängeneinheit auf die kleine Vieuporteinheit für diese Achse (sv*) zurück.

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 entweder von cqi oder cqb
• cqmax: Der größere Wert entweder von cqi oder cqb

Das folgende Beispiel verwendet die Einheit cqi, 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 im Referenzabschnitt Container-Abfragelängeneinheiten.

Fallbacks für Containerabfragen

Für Browser, die Containerabfragen 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 Zweispalten-Layout für die Kartenkomponente zu erstellen.

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

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

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

Siehe auch

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