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 etabliert das Element als Abfrage-Container und spezifiziert den Namen und Typ des Einschlusskontexts, der in einer Container-Abfrage verwendet wird.

Zusammengesetzte 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 fall-sensitiver Name für den Einschlusskontext. Weitere Details zur Syntax werden auf der container-name Eigenschaftsseite behandelt.

<container-type>

Der Typ des Einschlusskontexts. Weitere Details zur Syntax werden auf der container-type Eigenschaftsseite behandelt.

Formale Definition

Initialer Wertwie 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ößen-Einschließung

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>

Der explizite Weg, einen Container-Kontext zu erstellen, besteht darin, einen container-type mit einem optionalen container-name anzugeben:

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

Die container Kurzform soll dies einfacher machen und in einer einzigen Deklaration definieren:

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

Sie können diesen Container dann mit dem Namen mittels der @container @-Regel ansprechen:

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

Spezifikationen

Specification
CSS Conditional Rules Module Level 5
# container-shorthand

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch