container CSS-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Februar 2023 browserübergreifend verfügbar.
Die container-Shorthand CSS Eigenschaft legt das Element als Abfragecontainer fest und spezifiziert den Namen und Typ des verwendeten Einschließungskontexts in einer Container-Abfrage.
Bestandeigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Syntax
/* <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 fallunempfindlicher Name für den Einschließungskontext. Weitere Details zur Syntax werden auf der Seite der Eigenschaft
container-namebehandelt. <container-type>-
Der Typ des Einschließungskontexts. Weitere Details zur Syntax werden auf der Seite der Eigenschaft
container-typebehandelt.
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Prozentwerte | wie die jeweiligen Kurzschreibweisen:
|
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
Formale Syntax
container =
<'container-name'> [ / <'container-type'> ]?
<container-name> =
none |
<custom-ident>+
<container-type> =
normal |
[ [ size | inline-size ] || scroll-state ]
Beispiele
Inline-Größeneinschließung etablieren
Gegeben ist das folgende HTML-Beispiel, das eine Kartenkomponente mit einem Bild, einem Titel und etwas Text darstellt:
<div class="post">
<div class="card">
<h2>Card title</h2>
<p>Card content</p>
</div>
</div>
Der explizite Weg, einen Containerkontext zu erstellen, besteht darin, einen container-type mit einem optionalen container-name zu deklarieren:
.post {
container-type: inline-size;
container-name: sidebar;
}
Die container-Shorthand soll dies einfacher machen, indem es in einer einzigen Deklaration definiert wird:
.post {
container: sidebar / inline-size;
}
Sie können dann diesen Container mit dem Namen unter Verwendung der @container-At-Regel ansprechen:
@container sidebar (width >= 400px) {
/* <stylesheet> */
}
Spezifikationen
| Spezifikation |
|---|
| 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-Regel- CSS
contain-Eigenschaft - CSS
container-type-Eigenschaft - CSS
container-name-Eigenschaft - CSS
content-visibility-Eigenschaft