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

Bestandskomponenten

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 Containment-Kontext. Weitere Details zur Syntax finden Sie auf der container-name-Eigenschaftsseite.

<container-type>

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

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

Einrichten der Inlinegrößen-Einschließung

Angesichts des folgenden HTML-Beispiels, das eine Kartenschnittstelle mit einem Bild, einem Titel und etwas Text darstellt:

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

Die explizite Art, 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 dies in einer einzigen Deklaration einfacher machen:

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

Sie können dann mit der @container-Regel gezielt diesen Container über seinen Namen 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