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

Bestandteile der Eigenschaft

Diese Eigenschaft ist eine Kurzschreibweise 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 Einschlusskontext. Mehr Details zur Syntax sind auf der container-name Eigenschaftsseite beschrieben.
<container-type>: Der Typ des Einschlusskontexts. Mehr Details zur Syntax sind auf der container-type Eigenschaftsseite beschrieben.

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

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

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-Kurzschreibweise soll dies in einer einzigen Deklaration einfacher definieren:

css

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

Sie können dann diesen Container mittels Namen mit der @container At-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 Containergrößen- und Stilabfragen
@container At-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