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 Shorthand CSS Eigenschaft legt das Element als Abfragecontainer fest und gibt den Namen und den Typ des verwendeten Containment-Kontexts in einer Container-Abfrage an.

Bestandteileigenschaften

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:

Formaler Syntax

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

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

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

Beispiele

Festlegen der Inline-Größen-Eindämmung

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

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

Die explizite Methode zur Erstellung eines Container-Kontexts 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 diese Definition in einer einzigen Deklaration vereinfachen:

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

Sie können dann diesen Container mit dem Namen über die @container Regel ansprechen:

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

Spezifikationen

Specification
CSS Conditional Rules Module Level 5
# container-shorthand

Browser-Kompatibilität

Siehe auch