CSS-Kontainment
Das Modul CSS Containment definiert Kontainment und Containerabfragen.
Kontainment ermöglicht die Isolation von Teilbäumen einer Seite vom Rest des DOM. Dadurch kann der Browser die Leistung verbessern, indem die Darstellung dieser unabhängigen Teile optimiert wird.
Containerabfragen ähneln Dimensionen-Media Queries, mit dem Unterschied, dass die Abfragen auf den Abmessungen eines spezifischen Containerelements basieren, das als Kontainment-Kontext definiert ist, anstatt auf den Abmessungen des Viewports. Containerabfragen ermöglichen es, die Größe, Eigenschaften und Eigenschaftswerte eines Containers abzufragen, um bedingt CSS-Stile anzuwenden. Beim Anwenden dieser bedingten Stile können Sie Längeneinheiten von Containerabfragen verwenden, die Längen relativ zu den Abmessungen des Abfragecontainers angeben. Zusätzliche Eigenschaften sind definiert, um ein spezifisches Element als Abfragecontainer festzulegen und ihm einen spezifischen Namen zu geben.
Referenz
Eigenschaften
Ereignisse
Schnittstellen
Leitfäden
- CSS-Containerabfragen
-
Ein Leitfaden zur Verwendung von Containerabfragen mit
@container
, einschließlich der Benennung von Kontainment-Kontexten. - Verwendung von CSS-Kontainment
-
Beschreibt die grundlegenden Ziele von CSS-Kontainment und wie
contain
undcontent-visibility
für eine bessere Benutzererfahrung genutzt werden können. - Verwendung von Containergrößen- und Stilabfragen
-
Ein Leitfaden zum Schreiben von Containergrößen- und Stilabfragen mit
@container
, einschließlich Stilabfragen für benutzerdefinierte Eigenschaften, Abfragesyntax und Namen sowie verschachtelte Containerabfragen.
Verwandte Konzepte
-
CSS-Bedingungsregeln Modul
@container
at-rulecontainer
Eigenschaftcontainer-name
Eigenschaftcontainer-type
Eigenschaft
-
CSS-Media Queries Modul
@media
at-rule- CSS-logische Operatoren (
not
,or
undand
)
-
CSS-Übergänge Modul
@starting-style
at-ruletransition-behavior
Eigenschaft
-
CSS-Box-Sizing Modul
aspect-ratio
Eigenschaftcontain-intrinsic-size
Kurzschreibweisecontain-intrinsic-inline-size
Eigenschaftcontain-intrinsic-size
Eigenschaftcontain-intrinsic-width
Eigenschaftcontain-intrinsic-height
Eigenschaft
-
CSS-Zählerstile Modul
- Verwendung von CSS-Zählern Leitfaden
-
CSS-Verschachtelung Modul
- CSS-Verschachtelungsregeln Leitfaden
Spezifikationen
Specification |
---|
CSS Containment Module Level 2 |
CSS Containment Module Level 3 |