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