container

Baseline 2023
Newly available

Since February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die container Kurzform CSS-Eigenschaft legt das Element als Abfrage-Container fest und spezifiziert den Namen und den Typ des verwendeten Containment-Kontexts in einer Container-Abfrage.

Bestandteile der Eigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

Syntax

css
/* <container-name> */
container: my-layout;

/* <container-name> / <container-type> */
container: my-layout / size;

/* Global Values */
container: inherit;
container: initial;
container: revert;
container: revert-layer;
container: unset;

Werte

<container-name>

Ein case-sensitiver Name für den Containment-Kontext. Weitere Details zur Syntax finden Sie auf der Seite der Eigenschaft container-name.

<container-type>

Der Typ des Containment-Kontexts. Weitere Details zur Syntax finden Sie auf der Seite der Eigenschaft container-type.

Formale Definition

Anfangswertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente
VererbtNein
Prozentwertewie die jeweiligen Kurzschreibweisen:
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:

Formale Syntax

container = 
  <'container-name'> [ / <'container-type'> ]?  

<container-name> = 
  none             |
  <custom-ident>+  

<container-type> = 
  normal                                      |
  [ [ size | inline-size ] || scroll-state ]

Beispiele

Etablierung der Inline-Größenenthaltung

Angenommen, das folgende HTML-Beispiel ist eine Kartenkomponente mit einem Bild, einem Titel und etwas Text:

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

Die explizite Methode, um einen Container-Kontext zu erstellen, besteht darin, einen container-type mit einem optionalen container-name zu deklarieren:

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

Die container-Kurzform soll es einfacher machen, dies in einer einzigen Deklaration zu definieren:

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

Sie können dann diesen Container gezielt per Name mit der @container-Anweisung ansprechen:

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

Spezifikationen

Specification
CSS Conditional Rules Module Level 5
# container-shorthand

Browser-Kompatibilität

Siehe auch