CSS-Einschluss
Das CSS Containment-Modul definiert Einschluss- und Containeranfragen.
Einschluss ermöglicht die Isolierung von Seitenteilen vom Rest des DOM. Der Browser kann dann die Leistung verbessern, indem er das Rendering dieser unabhängigen Teile optimiert.
Containeranfragen sind ähnlich wie Dimensionen Media Queries, außer dass die Anfragen auf den Dimensionen eines bestimmten Containerelements basieren, das als Containment-Kontext definiert ist, anstatt auf den Dimensionen des Viewports. Containeranfragen ermöglichen das Abfragen der Größe eines Containers, seiner Eigenschaften, seiner Eigenschaftswerte oder sogar nur seines zugewiesenen container-name, um conditionale CSS-Stile anzuwenden. Beim Anwenden dieser conditionellen Stile können Sie Längeneinheiten für Containeranfragen verwenden, die Längen relativ zu den Dimensionen des Anfragecontainers angeben. Zusätzliche Eigenschaften werden definiert, um ein bestimmtes Element als Anfragecontainer zu etablieren und ihm einen spezifischen Namen zu geben.
Referenz
>Eigenschaften
Ereignisse
Schnittstellen
Leitfäden
- CSS-Containeranfragen
-
Ein Leitfaden zur Verwendung von Containeranfragen mit
@container, einschließlich der Benennung von Containment-Kontexten. - Verwendung von CSS-Einschluss
-
Beschreibt die grundlegenden Ziele des CSS-Einschlusses und wie man
containundcontent-visibilityfür ein besseres Benutzererlebnis einsetzt. - 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 Containeranfragen.
Verwandte Konzepte
-
CSS-Bedingungsregeln 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-Box-Größenanpassung Modul
aspect-ratioEigenschaftcontain-intrinsic-sizeKurzschriebweisecontain-intrinsic-inline-sizeEigenschaftcontain-intrinsic-block-sizeEigenschaftcontain-intrinsic-widthEigenschaftcontain-intrinsic-heightEigenschaft
-
CSS-Zählerstile Modul
- Verwendung von CSS-Zählern Leitfaden
-
CSS-Verschachtelung Modul
- CSS-Verschachtelung von At-Regeln Leitfaden
Spezifikationen
| Spezifikation |
|---|
| CSS Containment Module Level 2> |
| CSS Containment Module Level 3> |