CSS/Eigenschaften/contain

Browserunterstützung
caniuse.com

Die Eigenschaft contain erzeugt eine Containment Box und ermöglicht es einem Autor, anzugeben, dass ein Element und sein Inhalt so weit wie möglich unabhängig vom Rest des Dokumentbaums sind. Dadurch kann der Browser bei der korrekten Darstellung einer Seite mit contain wesentlich stärkere Optimierungen vornehmen, und die Autoren können sicher sein, dass ihre Seite nicht versehentlich aufgrund einer harmlosen Änderung in einen langsamen Codepfad gerät.

Beachten Sie: Die contain-Eigenschaft macht ein Element zu einer Containment-Box, aber nicht zu einem Query-Container.

Erlaubte Werte

none
(size | inline-size), layout, style, paint - eine oder mehrere Angaben aus dieser Liste, durch Leerzeichen getrennt. size und inline-size schließen sich aber gegenseitig aus.
strict - Sammelangabe, steht für size layout paint style
content - Sammelangabe, steht für layout paint style

size: Die Inline- und Block-Größe des Elements werden nicht mehr basierend auf seinem Inhalt bestimmt und müssen von außen festgelegt werden. Das Layouten der Containment-Box ist damit möglich, ohne ihren Inhalt untersuchen zu müssen.
inline-size: Wie size, aber nur die Inline-Größe muss von außen festgelegt werden. Die Größe in Block-Richtung hängt weiterhin vom Elementinhalt ab.
style: Durch style containment können Sie verhindern, das sich CSS-Eigenschaften, die nicht nur ein Element oder seine Nachkommen beeinflussen, nur innerhalb der Containment Box auswirken. Ein Beispiel dafür sind CSS-Zähler.
paint: paint containment erzwingt, dass die Inhalte eines Elements nicht außerhalb seiner Begrenzungen dargestellt werden. Damit wird garantiert, dass kein Kindelement eines solchen Elements sichtbar ist, wenn das Element selbst nicht dargestellt wird.
layout: layout containment trennt das Layout innerhalb der Containment-Box vom Layout außerhalb der Containment-Box.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

none

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

main {
  contain: inline-size;

}

.

Beachten Sie: Der Wert inline-size sorgt dafür, dass der Inhalt des Elements nicht mehr verwendet wird, um die benötigte Inline-Größe eines Elements automatisch zu berechnen. Ohne eine von außen kommende Festlegung der Inline-Größe (explizite Angabe am Element oder Steuerung durch einen Layoutcontainer wie Flexbox oder Grid) hat ein solches Element eine Breite von 0. Die auto-Block-Größe des Elements ist weiterhin vom Inhalt abhängig. Sie erreichen dadurch, dass die Inline-Größe des Hauptrahmens von seinem Inhalt entkoppelt wird^[1].