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

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

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

CSS-Container-Abfragen
Verwendung von Container-Größen und Stil-Abfragen
@container Regel
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