contain

Die contain-Eigenschaft in CSS teilt dem Browser mit, dass das Element und seine Nachkommen so weit wie möglich unabhängig vom Dokumentenstamm betrachtet werden. Dies kann potenziell Leistungsvorteile bei Berechnungen für Layout, Stil, Painting, Größe oder eine Kombination davon für einen begrenzten Bereich des DOM und nicht die gesamte Seite bieten.

Die Eigenschaft hat fünf Standardwerte und zwei Kurzwerte, die Variationen der Standardwerte kombinieren. Jeder Wert hat je nach Kontext des Elements, auf das er angewendet wird, einzigartige und gemeinsame Vorteile.

Die typische Verwendung dieser Eigenschaft ist ein Element, das Inhalte irgendeiner Art enthält. Betrachten Sie ein Widget, das eingehende Daten rendert, die das Layout und die Optik der Nachkommen des Elements ändern. Ein weiteres zu berücksichtigendes Element ist eines, das die Ergebnisse von Drittanbieterdaten enthält, wie z. B. eine Banneranzeige, bei der die Vorteile der Einkapselung es uns ermöglichen, bestimmte Inhalte entweder zu de-priorisieren, wie mit der Größenänderung der empfangenen Inhalte umzugehen ist oder zu bestimmen, ob Inhalte überhaupt sichtbar sein sollen. Eine weitgehend statische Seite hingegen wird wenig Nutzen bringen, abgesehen vom ersten Layout und Painting beim Laden der Seite.

Syntax

div {
  contain: none | strict | content | [ size || layout || style || paint ];
}

div {
  contain: none; /* no containment on element */
  contain: layout; /* influences how element relates to other elements in the document */
  contain: paint; /* influences how element is painted to screen */
  contain: size; /* influences how element affects size calculations for the page */
  contain: style; /* is considered at-risk for removal from spec */


  contain: content; /* combines layout and paint */
  contain: strict; /* combines layout, paint, and size */
}

Eigenschaftswerte

Layout

Der layout-Containment-Wert informiert den Browser darüber, dass keine Nachkommen des Elements andere Elemente auf der Seite beeinflussen und umgekehrt. Dies ermöglicht es dem Browser, die Anzahl der für die Seitengestaltung erforderlichen Berechnungen potenziell zu reduzieren.

Ein weiterer Vorteil ist, dass der Browser Berechnungen verzögern oder auf eine niedrigere Priorität verschieben kann, wenn das enthaltene Element außerhalb des Bildschirms oder auf andere Weise verdeckt ist. Ein Beispiel hierfür ist ein enthaltenes Element, das sich nicht im sichtbaren Bereich am Ende eines Blockelements befindet, während der Anfang dieses Blockelements sichtbar ist.

Ein Element mit layout-Containment wird zu einem enthaltenden Box für positionierte Nachkommen – wie z. B. Elemente mit absoluter Positionierung. Das Element erhält einen neuen Stapelkontext in Bezug auf die Seite, und die z-index-Eigenschaft kann verwendet werden. Allerdings gelten keine richtungsbezogenen Eigenschaften wie top oder left.

Auch wenn die Nachkommen des enthaltenen Elements andere Elemente auf der Seite nicht beeinflussen können, können sie dennoch ihren enthaltenden Elternteil beeinflussen. Beispielsweise kann ein Nachkomme dazu führen, dass sich das enthaltene Element als Reaktion auf Änderungen verkleinert. In diesem Fall kann das enthaltene Element andere Elemente auf der Seite immer noch potenziell beeinflussen, aber die Nachkommen werden dennoch nicht in diese Berechnungen einbezogen.

Die folgende Demo bietet eine einfache Erklärung dessen, was passiert, wenn das layout Containment angewendet wird. Wenn Sie auf jede der oberen Boxen klicken, wird das Containment angewendet und die roten Pfeile ändern ihr Aussehen. Das Aussehen der roten Pfeile zeigt an, ob die Nachkommen der Box die anderen Boxen auf der Seite während der Layoutberechnungen beeinflussen.

Painting

Der paint-Containment-Wert informiert den Browser darüber, dass keine Nachkommen des Elements außerhalb der Border-Box des Elements gemalt werden. Wenn ein Nachkommenselement so positioniert ist, dass ein Teil seiner Begrenzungsbox vom border-box des enthaltenen Elements abgeschnitten wird, dann wird dieser Teil nicht gemalt. Wenn ein Nachkommenselement vollständig außerhalb der border-box des enthaltenen Elements positioniert ist, dann wird es überhaupt nicht gemalt. Dies ähnelt der Anwendung von overflow: hidden; auf das Element, jedoch ohne die Vorteile des Überspringens oder Reduzierens notwendiger Berechnungen.

Ein weiterer Vorteil ist, dass der Browser bei der Durchführung von Painting-Berechnungen das Malen von Nachkommen überspringen oder reduzieren kann, wenn das enthaltene Element auf irgendeine Weise nicht im Viewport sichtbar ist. Ein Beispiel hierfür ist ein Element, das außerhalb der Seite links vom Viewport platziert ist. Wenn das enthaltene Element nicht sichtbar ist, dann ist garantiert, dass seine Inhalte nicht sichtbar sind. Daher müssen sie nicht an den Painting-Berechnungen beteiligt werden.

Ein Element mit paint-Containment wird auch zu einer enthaltenden Box für positionierte Nachkommen – wie z. B. Elemente mit absoluter Positionierung. Das Element erhält auch einen neuen Stapelkontext in Bezug auf die Seite, und die z-index-Eigenschaft kann verwendet werden. Allerdings gelten keine richtungsbezogenen Eigenschaften wie top oder left.

Ein scrollendes Element kann zusätzliche Vorteile erzielen, indem seine Nachkommen in eine neue Painting-Ebene gelegt werden, die die Scrolling-Leistung verbessern kann. Normalerweise können scrollende Elemente ständige Repaints verursachen, wenn die Nachkommen während des Scrollens erscheinen und verschwinden. Ein scrollendes Element mit Paint-Containment kann dieses ständige Repainting von scrollenden Nachkommen potenziell überspringen.

Die folgende Demo bietet eine einfache Erklärung dessen, was passiert, wenn das paint Containment angewendet wird. Klicken Sie irgendwo, um das Containment auf der lila Box umzuschalten. Wenn das Containment angewendet wird, ändern sich einige der grünen Boxen in ihrem Aussehen. Das Aussehen der grünen Boxen zeigt an, wie sie gemalt werden oder nicht.

Größe

Der size-Containment-Wert informiert den Browser darüber, dass keine Nachkommen bei der Durchführung von Layoutberechnungen für die Seite berücksichtigt werden müssen. Das enthaltene Element muss mit den Eigenschaften height und width versehen sein, andernfalls kollabiert es zu null Pixeln Quadrat. Nur das Element selbst muss für die Seitenlayoutberechnungen berücksichtigt werden, da Nachkommen die Größe des Elements nicht beeinflussen können. Die Nachkommen des enthaltenen Elements werden bei solchen Berechnungen vollständig übersprungen; als hätte es überhaupt keine Nachkommen.

Für volle Optimierungsvorteile wird das size-Containment normalerweise mit anderen Containment-Typen angewendet.

Ein Element mit dem size-Containment erhält einen neuen Stapelkontext in Bezug auf die Seite, und die z-index-Eigenschaft kann verwendet werden. Allerdings gelten keine richtungsbezogenen Eigenschaften wie top oder left.

Die folgende Demo bietet eine einfache Erklärung dessen, was passiert, wenn das size Containment angewendet wird. Klicken Sie irgendwo, um das Containment auf der lila Box umzuschalten. Wenn das Containment angewendet wird, ändert sich die Größe der lila Box. Standardmäßig wird die Höhe der lila Box durch ihre Kinder bestimmt, aber mit Containment muss die Höhe definiert werden. Sobald das Containment angewendet wird, sind die Nachkommen nicht mehr an größenbezogenen Layoutberechnungen beteiligt.

Stil

Der style-Containment-Wert informiert den Browser darüber, dass einige CSS-Eigenschaften wie Zähler und Anführungszeichen auf das enthaltene Element beschränkt werden.

Die Eigenschaften counter-increment und counter-set müssen auf den Unterbaum des enthaltenen Elements beschränkt werden. Wenn sie außerhalb des enthaltenen Elements erweitert werden, wird ein neuer Zähler erstellt.

Die Werte der Eigenschaft content: open-quote, close-quote, no-open-quote und no-close-quote müssen auf den Unterbaum des enthaltenen Elements beschränkt werden.

Dieser Containment-Wert gilt als risikobehaftet und könnte aus der Spezifikation entfernt werden.

Inhalt

Der content-Containment-Wert ist eine Kombination aus den Werten für Layout- und Paint-Containment. Dies entspricht der Anwendung von Containment auf diese Weise.

div {
  contain: layout paint;
}

Alle potenziellen Vorteile, die für jeden Wert oben beschrieben wurden, wären dann für das enthaltene Element verfügbar. Dieses Containment könnte als relativ sicher betrachtet werden, um es breit auf mehrere Elemente auf der Seite anzuwenden.

Streng

Der strict-Containment-Wert ist eine Kombination aus den layout-, paint- und size-Containment-Werten. Dies entspricht der Anwendung von Containment auf diese Weise.

div {
  contain: layout paint size;
}

Alle potenziellen Vorteile, die für jeden Wert oben beschrieben wurden, wären dann für das enthaltene Element verfügbar.

Als "strengster" der Containment-Werte sollte dieser Wert mit Bedacht eingesetzt werden. Dies liegt an den Dimensionsanforderungen, die er an das enthaltene Element stellt. Mit diesen Anforderungen bietet dieser Containment-Wert die größten potenziellen Leistungsvorteile des Containments.

Browser-Unterstützung

Weitere Ressourcen

• CSS Contain Module Level 1
• CSS Contain Module Level 2
• MDN CSS Contain-Eigenschaft
• MDN CSS Containment