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@containerDeskriptoren:aspect-ratioblock-sizeheightinline-sizeorientationwidth
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
containundcontent-visibilityfü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
@mediaAt-Regel- CSS logische Operatoren (
not,orundand)
-
CSS-Übergänge Modul
@starting-styleAt-Regeltransition-behaviorEigenschaft
-
CSS-Box-Sizing-Modul
aspect-ratioEigenschaftcontain-intrinsic-sizeKurzform-Eigenschaftcontain-intrinsic-inline-sizeEigenschaftcontain-intrinsic-sizeEigenschaftcontain-intrinsic-widthEigenschaftcontain-intrinsic-heightEigenschaft
-
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 |