CSS-Containment
Das CSS-Containment-Modul 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 sind ähnlich wie Dimensionen-Media Queries, außer dass die Abfragen auf den Dimensionen eines spezifischen Containerelements 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 Abfragecontainers spezifizieren. Zusätzliche Eigenschaften werden definiert, um ein spezifisches Element als Abfragecontainer festzulegen 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
contain
undcontent-visibility
für eine verbesserte Benutzererfahrung eingesetzt werden. - 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 Verschachtelung von Container-Abfragen.
Verwandte Konzepte
-
CSS-Bedingungsregeln 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-Boxmodell 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-Nesting Modul
- CSS-Nesting-Regeln Leitfaden
Spezifikationen
Specification |
---|
CSS Containment Module Level 2> |
CSS Containment Module Level 3> |