container

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Februar 2023⁩.

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

Bestandeigenschaften

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-Kontextes. Weitere Details zur Syntax finden Sie auf der Seite der Eigenschaft container-type.

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `container-name`: `none` `container-type`: `normal`
Anwendbar auf	alle Elemente
Vererbt	Nein
Prozentwerte	wie die jeweiligen Kurzschreibweisen: `container-name`: Nein `container-type`: Nein
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `container-name`: `none` or an ordered list of identifiers `container-type`: wie angegeben
Animationstyp	wie die jeweiligen Kurzschreibweisen: `container-name`: Not animatable `container-type`: Farbe

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

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 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 Kurzform container soll es einfacher machen, dies in einer einzigen Deklaration zu definieren:

css

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

Sie können dann diesen Container mit Namen unter Verwendung der @container at-rule anvisieren:

css

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

Spezifikationen

Specification
CSS Conditional Rules Module Level 5 # container-shorthand

Browser-Kompatibilität

Siehe auch

CSS Container-Abfragen
Verwendung von Container-Größen- und Stilabfragen
@container at-rule
CSS contain Eigenschaft
CSS container-type Eigenschaft
CSS container-name Eigenschaft
CSS content-visibility Eigenschaft

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden