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

• contain
• content-visibility

Ereignisse

• contentvisibilityautostatechange

Schnittstellen

• ContentVisibilityAutoStateChangeEvent
  • skipped Eigenschaft
• CSSContainerRule
  • CSSContainerRule.containerName
  • CSSContainerRule.containerQuery

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 und content-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

• Layout und der umgebende Block

• Block-Formatierungskontext

• CSS-Bedingungsregeln Modul

  • @container Regel
  • container Eigenschaft
  • container-name Eigenschaft
  • container-type Eigenschaft

• CSS-Media-Queries Modul

  • @media Regel
  • CSS-logische Operatoren (not, or und and)

• CSS-Übergänge Modul

  • @starting-style Regel
  • transition-behavior Eigenschaft

• CSS-Boxmodell Modul

  • aspect-ratio Eigenschaft
  • contain-intrinsic-size Kurzschreibweise
  • contain-intrinsic-inline-size Eigenschaft
  • contain-intrinsic-block-size Eigenschaft
  • contain-intrinsic-width Eigenschaft
  • contain-intrinsic-height Eigenschaft

• CSS-Zählerstile Modul

  • Verwendung von CSS-Zählern Leitfaden

• CSS-Nesting Modul

  • CSS-Nesting-Regeln Leitfaden

Spezifikationen

Siehe auch

• Verwendung von Feature-Queries
• Verwendung von CSS-Media Queries
• Verständnis von Seitenverhältnissen
• @supports Regel