CSS containment
Das CSS Containment-Modul definiert Containment und Container-Abfragen.
Containment ermöglicht die Isolation von Teilbäumen der Seite vom Rest des DOM. Der Browser kann somit die Leistung verbessern, indem die Darstellung dieser unabhängigen Teile optimiert wird.
Container-Abfragen ähneln Dimensions-Media-Abfragen, außer dass die Abfragen auf den Dimensionen eines spezifischen Container-Elements basieren, das als Containment-Kontext definiert ist, anstatt auf den Dimensionen des Ansichtsfensters. Container-Abfragen 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 Längeneinheiten für Container-Abfragen verwenden, die Längen relativ zu den Dimensionen des Abfrage-Containers spezifizieren. Zusätzliche Eigenschaften werden definiert, um ein spezifisches Element als Abfrage-Container zu etablieren und ihm einen spezifischen Namen zu geben.
Referenz
Eigenschaften
Ereignisse
Schnittstellen
Leitfäden
- CSS-Container-Abfragen
-
Ein Leitfaden zur Verwendung 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 man
contain
undcontent-visibility
für eine bessere Benutzererfahrung nutzt. - 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 das Verschachteln von Container-Abfragen.
Verwandte Konzepte
-
CSS-Bedingungsregeln Modul
@container
Regelcontainer
Eigenschaftcontainer-name
Eigenschaftcontainer-type
Eigenschaft
-
CSS-Media-Abfragen Modul
@media
Regel- CSS logische Operatoren (
not
,or
, undand
)
-
CSS-Übergänge Modul
@starting-style
Regeltransition-behavior
Eigenschaft
-
CSS-Box-Größenanpassung 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 Leitfaden
-
CSS-Verschachtelung Modul
- CSS-Verschachtelungsregeln Leitfaden
Spezifikationen
Specification |
---|
CSS Containment Module Level 2 |
CSS Containment Module Level 3 |