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

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öß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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
container

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch