CSS-Einschränkung
Das CSS Containment Modul definiert Einschränkungen und Container-Abfragen.
Einschränkungen ermöglichen die Isolierung von Teilbäumen einer Seite vom Rest des DOMs. Der Browser kann dann die Leistung verbessern, indem er die Darstellung dieser unabhängigen Teile optimiert.
Container-Abfragen sind ähnlich wie Dimensionen-Media Queries, außer dass die Abfragen auf den Dimensionen eines bestimmten Container-Elements basieren, das als Containment Context definiert ist, anstatt auf den Dimensionen des Viewports. Container-Abfragen ermöglichen das Abfragen von Größe, Eigenschaften und Eigenschaftswerten eines Containers, um CSS-Stile bedingt anzuwenden. Bei der Anwendung dieser bedingten Stile können Sie Containereinheitslängen verwenden, die Längen relativ zu den Dimensionen des Abfragecontainers angeben. Zusätzliche Eigenschaften werden definiert, um ein bestimmtes Element als Abfragecontainer zu etablieren und ihm einen bestimmten 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-Einschränkungen
-
Beschreibt die grundlegenden Ziele der CSS-Einschränkung 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 zur Verschachtelung von Containerabfragen.
Verwandte Konzepte
-
CSS-Bedingungsregeln Modul
@containerAt-RegelcontainerEigenschaftcontainer-nameEigenschaftcontainer-typeEigenschaft
-
CSS Media Queries Modul
@mediaAt-Regel- Logische Operatoren in CSS (
not,or, undand)
-
CSS-Übergänge Modul
@starting-styleAt-Regeltransition-behaviorEigenschaft
-
CSS-Box-Sizing 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-Verschachtelungsregeln Leitfaden
Spezifikationen
| Specification |
|---|
| CSS Containment Module Level 2> |
| CSS Containment Module Level 3> |