CSS-Kontainierung
Das CSS containment Modul definiert Containment und Containerabfragen.
Containment ermöglicht die Isolierung von Seitenunterbäumen vom Rest des DOM. Der Browser kann dann die Leistung verbessern, indem er das Rendering dieser unabhängigen Teile optimiert.
Containerabfragen ähneln Media Queries, außer dass die Abfragen auf den Abmessungen eines spezifischen Containerelements basieren, das als Containment-Kontext definiert ist, anstatt auf den Abmessungen des Viewports. Containerabfragen ermöglichen es, die Größe, Eigenschaften und Eigenschaftswerte eines Containers abzufragen, um bedingt CSS-Stile anzuwenden. Beim Anwenden dieser bedingten Stile können Sie Längeneinheiten für Containerabfragen verwenden, die Längen relativ zu den Dimensionen des Abfragecontainers angeben. Zusätzliche Eigenschaften sind definiert, um ein spezifisches Element als Abfragecontainer zu etablieren und ihm einen spezifischen Namen zu geben.
Referenz
>Eigenschaften
Ereignisse
Schnittstellen
Leitfäden
- CSS-Containerabfragen
-
Ein Leitfaden zur Verwendung von Containerabfragen mit
@container, einschließlich der Benennung von Containment-Kontexten. - Verwendung von CSS-Kontainierung
-
Beschreibt die grundlegenden Ziele der CSS-Kontainierung und wie
containundcontent-visibilityfür eine bessere Benutzererfahrung genutzt werden können. - 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 verschachtelte Containerabfragen.
Verwandte Konzepte
-
CSS-Bedingte Regeln Modul
@containerAt-RegelcontainerEigenschaftcontainer-nameEigenschaftcontainer-typeEigenschaft
-
CSS-Media Queries Modul
@mediaAt-Regel- CSS-logische Operatoren (
not,orundand)
-
CSS-Übergänge Modul
@starting-styleAt-Regeltransition-behaviorEigenschaft
-
CSS-Boxmodell Modul
aspect-ratioEigenschaftcontain-intrinsic-sizeKurzschreibweisecontain-intrinsic-inline-sizeEigenschaftcontain-intrinsic-block-sizeEigenschaftcontain-intrinsic-widthEigenschaftcontain-intrinsic-heightEigenschaft
-
CSS-Zählerstile Modul
- Verwendung von CSS-Zählern Leitfaden
-
CSS-Verschachtelung Modul
- CSS-Verschachtelungs-At-Rules Leitfaden
Spezifikationen
| Specification |
|---|
| CSS Containment Module Level 2> |
| CSS Containment Module Level 3> |