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-Eigenschaft Shorthand CSS legt das Element als Abfragecontainer fest und spezifiziert den Namen und Typ des Eingrenzungskontextes, der in einer Containerabfrage verwendet wird.
Zusätzliche Eigenschaften
Diese Eigenschaft ist eine Abkürzung 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 Groß-/Kleinschreibung beachtender Name für den Eingrenzungskontext. Weitere Details zur Syntax sind auf der Seite zur
container-name-Eigenschaft verfügbar. <container-type>-
Der Typ des Eingrenzungskontextes. Weitere Details zur Syntax sind auf der Seite zur
container-type-Eigenschaft verfügbar.
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
Etablierung der Inline-Größeneingrenzung
Angenommen, das folgende HTML-Beispiel ist eine Kartenkomponente mit einem Bild, einem Titel und etwas Text:
<div class="post">
<div class="card">
<h2>Card title</h2>
<p>Card content</p>
</div>
</div>
Der explizite Weg, um 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-Abkürzung ist dazu gedacht, dies in einer einzigen Deklaration definierbar zu machen:
.post {
container: sidebar / inline-size;
}
Sie können dann diesen Container nach Name mit der @container-At-Regel anvisieren:
@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 Containergröße und -stilabfragen
@container-Regel- CSS-
contain-Eigenschaft - CSS-
container-type-Eigenschaft - CSS-
container-name-Eigenschaft - CSS-
content-visibility-Eigenschaft