CSS-Kontainment
Das CSS-Kontainment-Modul 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 er das Rendering dieser unabhängigen Teile optimiert.
Containerabfragen sind ähnlich wie Dimensionen-Media Queries, außer dass die Abfragen auf den Dimensionen eines bestimmten Containerelements basieren, das als Kontainment-Kontext definiert ist, anstatt auf den Dimensionen des Viewports. Containerabfragen ermöglichen es, die Größe, Eigenschaften und Eigenschaftswerte eines Containers abzufragen, um CSS-Stile bedingt anzuwenden. Beim Anwenden dieser bedingten Stile können Sie Containerabfrage-Längeneinheiten verwenden, die Längen relativ zu den Dimensionen des Abfragecontainers angeben. Zusätzliche Eigenschaften werden definiert, um ein spezifisches Element als Abfragecontainer zu etablieren und ihm einen bestimmten Namen zu geben.
Referenz
Eigenschaften
Ereignisse
Schnittstellen
Leitfäden
- CSS-Containerabfragen
-
Ein Leitfaden zur Verwendung von Containerabfragen mit
@container
, einschließlich 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öße und Stilabfragen
-
Ein Leitfaden zum Schreiben von Containergrößen- und Stilabfragen mit
@container
, einschließlich Stilabfragen für benutzerdefinierte Eigenschaften, Abfragesyntax und -namen, sowie das Verschachteln von Containerabfragen.
Verwandte Konzepte
-
CSS bedingte Regeln Modul
@container
Regelcontainer
Eigenschaftcontainer-name
Eigenschaftcontainer-type
Eigenschaft
-
CSS Media Queries Modul
@media
Regel- CSS logische Operatoren (
not
,or
, undand
)
-
CSS-Übergänge Modul
@starting-style
Regeltransition-behavior
Eigenschaft
-
CSS Box-Größenbestimmung Modul
aspect-ratio
Eigenschaftcontain-intrinsic-size
Kurzschreibweisecontain-intrinsic-inline-size
Eigenschaftcontain-intrinsic-block-size
Eigenschaftcontain-intrinsic-width
Eigenschaftcontain-intrinsic-height
Eigenschaft
-
CSS-Zählerstile Modul
- Verwendung von CSS-Zählern Anleitung
-
CSS-Verschachtelung Modul
- CSS-Verschachtelungsregeln Anleitung
Spezifikationen
Specification |
---|
CSS Containment Module Level 2 |
CSS Containment Module Level 3 |