@container

Die @container At-Regel hat die folgende Syntax:

@container <container-condition># {
  <stylesheet>
}

Zum Beispiel:

@container (width > 400px) {
  h2 {
    font-size: 1.5em;
  }
}

/* with an optional <container-name> */
@container tall (height > 30rem) {
  h2 {
    line-height: 1.6;
  }
}

/* multiple queries in a single condition */
@container (width > 400px) and style(--responsive: true) {
  h2 {
    font-size: 1.5em;
  }
}

/* condition list */
@container card (width > 400px), style(--responsive: true) {
  h2 {
    font-size: 1.5em;
  }
}

<container-condition>

Ein optionaler <container-name> und ein <container-query>. Stile, die in der <stylesheet> definiert sind, werden angewendet, wenn die Bedingung zutrifft.

<container-name>

Optional. Der Name des Containers, auf den die Stile angewendet werden, wenn die Abfrage zu wahr ausgewertet wird, angegeben als ein <ident>.

<container-query>

Eine Reihe von Funktionen, die gegen den Abfragecontainer ausgewertet werden, wenn sich die Größe des Containers ändert.

<stylesheet>

Eine Reihe von CSS-Deklarationen.

Logische Schlüsselwörter können verwendet werden, um die Containerbedingung zu definieren:

• and kombiniert zwei oder mehr Bedingungen.
• or kombiniert zwei oder mehr Bedingungen.
• not negiert die Bedingung. Es ist nur eine 'not'-Bedingung pro Containerabfrage erlaubt und kann nicht mit den Schlüsselwörtern and oder or verwendet werden.

@container (width > 400px) and (height > 400px) {
  /* <stylesheet> */
}

@container (width > 400px) or (height > 400px) {
  /* <stylesheet> */
}

@container not (width < 400px) {
  /* <stylesheet> */
}

Ein Einschlusskontext kann mit der container-name Eigenschaft benannt werden.

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

Die Kurzschreibweise dafür ist die Verwendung von container in der Form container: <name> / <type>, zum Beispiel:

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

In Containerabfragen wird die container-name Eigenschaft verwendet, um die Menge der Container auf diejenigen mit einem passenden Abfragecontainanernamen zu filtern:

@container sidebar (width > 400px) {
  /* <stylesheet> */
}

Details zur Verwendung und zu Namensbeschränkungen sind auf der container-name Seite beschrieben.

Die folgenden Deskriptoren können innerhalb der Containerbedingung verwendet werden:

aspect-ratio

Das aspect-ratio des Containers, berechnet als Breite zu Höhe des Containers, ausgedrückt als <ratio> Wert.

block-size

Die block-size des Containers, ausgedrückt als <length> Wert.

height

Die Höhe des Containers, ausgedrückt als <length> Wert.

inline-size

Die inline-size des Containers, ausgedrückt als <length> Wert.

orientation

Die Ausrichtung des Containers, entweder landscape oder portrait.

width

Die Breite des Containers, ausgedrückt als <length> Wert.

Betrachten Sie das folgende Beispiel eines Karten-Komponents mit einem Titel und etwas Text:

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

Ein Container-Kontext kann mit der container-type Eigenschaft erstellt werden, in diesem Fall unter Verwendung des inline-size Wertes in der .post Klasse. Sie können dann die @container At-Regel verwenden, um Stile auf das Element mit der .card Klasse in einem Container anzuwenden, der schmaler als 650px ist.

const post = document.querySelector(".post");
const span = document.createElement("span");
span.textContent = ".post width: " + post.clientWidth + "px";
post.parentNode.insertBefore(span, post.nextSibling);
// update on resize
window.addEventListener("resize", () => {
  span.textContent = ".post width: " + post.clientWidth + "px";
});

span {
  display: block;
  text-align: center;
}
.card {
  margin: 10px;
  border: 2px dotted;
  font-size: 1.5em;
}
.post {
  border: 2px solid;
}

/* A container context based on inline size */
.post {
  container-type: inline-size;
}

/* Apply styles if the container is narrower than 650px */
@container (width < 650px) {
  .card {
    width: 50%;
    background-color: gray;
    font-size: 1em;
  }
}

Angenommen, das folgende HTML-Beispiel ist ein Kartenkomponent mit einem Titel und etwas Text:

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

Erstellen Sie zuerst einen Container-Kontext mit den Eigenschaften container-type und container-name. Die Kurzschreibsyntax für diese Deklaration wird auf der container Seite beschrieben.

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

Zielen Sie dann auf diesen Container, indem Sie den Namen zur Containerabfrage hinzufügen:

@container summary (min-width: 400px) {
  .card {
    font-size: 1.5em;
  }
}

Es ist nicht möglich, mehrere Container in einer einzelnen Containerabfrage anzusprechen. Es ist möglich, Containerabfragen zu verschachteln, was denselben Effekt hat.

Die folgende Abfrage wird zu wahr auswertet und wendet den deklarierten Stil an, wenn der Container mit dem Namen summary breiter als 400px ist und einen Vorfahren-Container hat, der breiter als 800px ist:

@container summary (min-width: 400px) {
  @container (min-width: 800px) {
    /* <stylesheet> */
  }
}

Containerabfragen können auch den berechneten Stil des Containerelements auswerten. Eine Container-Stilabfrage ist eine @container-Abfrage, die eine oder mehrere style() funktionale Notationen verwendet. Die boolesche Syntax und Logik zum Kombinieren von Stilfunktionen in eine Stilabfrage ist die gleiche wie für CSS-Funktionsabfragen.

@container style(<style-feature>),
    not style(<style-feature>),
    style(<style-feature>) and style(<style-feature>),
    style(<style-feature>) or style(<style-feature>) {
  /* <stylesheet> */
}

Der Parameter jeder style() ist ein einzelnes <style-feature>. Ein <style-feature> ist eine gültige CSS Deklaration, eine CSS-Eigenschaft oder ein <custom-property-name>.

@container style(--themeBackground),
    not style(background-color: red),
    style(color: green) and style(background-color: transparent),
    style(--themeColor: blue) or style(--themeColor: purple) {
  /* <stylesheet> */
}

Ein Stilmerkmal ohne Wert wird zu wahr ausgewertet, wenn der berechnete Wert vom Anfangswert für die gegebene Eigenschaft abweicht.

Wenn das <style-feature>, das als Argument der style()-Funktion übergeben wird, eine Deklaration ist, wird die Stilabfrage zu wahr ausgewertet, wenn der Wert der Deklaration mit dem berechneten Wert dieser Eigenschaft für den abgefragten Container identisch ist. Andernfalls wird es zu falsch aufgelöst.

Die folgende Containerabfrage überprüft, ob der computed_value des --accent-color des Containerelements blue ist:

@container style(--accent-color: blue) {
  /* <stylesheet> */
}

Stilmerkmale, die eine Kurzschreibweise auf Anfrage stellen, sind wahr, wenn die berechneten Werte für jede ihrer Langform-Eigenschaften übereinstimmen und andernfalls falsch. Beispielsweise wird @container style(border: 2px solid red) zu wahr bewertet, wenn alle 12 Langform-Eigenschaften (border-bottom-style, etc.), die diese Kurzform ausmachen, wahr sind.

Die globalen revert und revert-layer sind als Werte in einem <style-feature> ungültig und führen dazu, dass die Container-Stilabfrage als falsch ausgewertet wird.

• Verwendung von Containerabfragen
• Verwendung von Containergrößen- und Stilabfragen
• container-name
• container-type
• contain
• content-visibility
• CSS-Einschlussmodul