CSS Containment
Das Modul CSS Containment definiert Containment und Container-Abfragen.
Containment ermöglicht die Isolation von Teilbäumen einer Seite vom Rest des DOM. Der Browser kann dann die Leistung verbessern, indem er das Rendering dieser unabhängigen Teile optimiert.
Container-Abfragen ähneln Dimensionen-Media Queries, außer dass die Abfragen auf den Dimensionen eines bestimmten Container-Elements basieren, das als Containment-Kontext definiert ist, anstatt auf den Dimensionen des Viewports. Container-Abfragen ermöglichen das Abfragen der Größe, Eigenschaften und Eigenschaftswerte eines Containers, um CSS-Stile bedingt anzuwenden. Bei der Anwendung dieser bedingten Stile können Sie Längeneinheiten von Container-Abfragen verwenden, die Längen relativ zu den Dimensionen des Abfragecontainers angeben. Zusätzliche Eigenschaften werden definiert, um ein spezifisches Element als Abfragecontainer festzulegen und ihm einen spezifischen Namen zu geben.
Referenz
Eigenschaften
At-Regeln und Deskriptoren
@container
@container
Deskriptoren:aspect-ratio
block-size
height
inline-size
orientation
width
Funktionen
Datentypen
Ereignisse
Schnittstellen
Leitfäden
- CSS Container-Abfragen
-
Ein Leitfaden zur Nutzung von Container-Abfragen mit
@container
, einschließlich der Benennung von Containment-Kontexten. - Verwendung von CSS Containment
-
Beschreibt die grundlegenden Ziele von CSS Containment und wie
contain
undcontent-visibility
für ein besseres Benutzererlebnis genutzt werden können. - Verwendung von Container-Größen- und Stilabfragen
-
Ein Leitfaden zum Schreiben von Container-Größen- und Stilabfragen mit
@container
, einschließlich Stilabfragen für benutzerdefinierte Eigenschaften, Abfragesyntax und Namen sowie zum Verschachteln von Container-Abfragen.
Verwandte Konzepte
-
CSS-Media-Queries Modul
@media
At-Regel- CSS logische Operatoren (
not
,or
undand
)
-
CSS-Übergänge Modul
@starting-style
At-Regeltransition-behavior
Eigenschaft
-
CSS-Box-Sizing-Modul
aspect-ratio
Eigenschaftcontain-intrinsic-size
Kurzform-Eigenschaftcontain-intrinsic-inline-size
Eigenschaftcontain-intrinsic-size
Eigenschaftcontain-intrinsic-width
Eigenschaftcontain-intrinsic-height
Eigenschaft
-
CSS-Zählerstile Modul
- Verwendung von CSS-Zählern Anleitung
-
CSS-Verschachtelung Modul
- CSS-Verschachtelungs-At-Regeln Anleitung
Spezifikationen
Specification |
---|
CSS Containment Module Level 2 |
CSS Containment Module Level 3 |