Enthalten - CSS-Tricks

Die containEigenschaft in CSS zeigt dem Browser an, dass das Element und seine Nachkommen so weit wie möglich vom Dokumentbaum unabhängig sind. Dies bietet möglicherweise Leistungsvorteile bei Berechnungen in Layout, Stil, Farbe, Größe oder einer beliebigen Kombination für einen begrenzten Bereich des DOM und nicht für die gesamte Seite.

Die Eigenschaft verfügt über fünf Standardwerte und zwei Kurzwertwerte, die Variationen der Standardwerte kombinieren. Jeder Wert hat einige einzigartige und gemeinsame Vorteile, abhängig vom Kontext des Elements, das sie anwendet.

Die typische Verwendung dieser Eigenschaft ist ein Element, das Inhalte eines bestimmten Typs enthält. Stellen Sie sich ein Widget vor, das die eingehenden Daten rendert, die das Layout und die Darstellung der Nachkommen des Elements ändern. Ein weiteres zu berücksichtigendes Element ist eines, das die Ergebnisse von Daten von Drittanbietern enthält, z. B. ein Werbebanner, bei dem die Vorteile der Eindämmung es uns ermöglichen, das Malen bestimmter Inhalte, die Handhabung der Größe des empfangenen Inhalts oder die Bestimmung des Inhalts zu deaktivieren sollte sogar sichtbar sein. Eine meist statische Site hingegen erhält außer dem ersten Layout und dem Malen auf dem Bildschirm beim Laden der Seite nur geringe Vorteile.

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 layoutContainment-Wert informiert den Browser darüber, dass keine der Nachkommen des Elements Auswirkungen auf andere Elemente auf der Seite hat und dass diese anderen Elemente keine Auswirkungen auf die Nachkommen des enthaltenen Elements haben. Auf diese Weise kann der Browser möglicherweise die Anzahl der Berechnungen reduzieren, die beim Erstellen des Seitenlayouts erforderlich sind

Ein weiterer Vorteil besteht darin, dass der Browser verzögerte Berechnungen verzögern oder auf eine niedrigere Priorität verschieben kann, wenn das enthaltene Element außerhalb des Bildschirms liegt oder auf irgendeine Weise verdeckt ist. Ein Beispiel hierfür ist ein enthaltenes Element, das am Ende eines Blockelements nicht angezeigt wird und dessen Anfang sichtbar ist.

Ein Element mit layoutContainment wird zu einem Containing-Feld für positionierte Nachkommen - 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. Richtungsmerkmale wie topoder leftgelten jedoch nicht.

Auch wenn die Nachkommen des enthaltenen Elements andere Elemente auf der Seite möglicherweise nicht beeinflussen, können sie dennoch das enthaltene Vorfahrenelement beeinflussen. Ein Nachkomme kann beispielsweise dazu führen, dass die Größe des enthaltenen Elements als Reaktion auf Änderungen in der Größe geändert wird. In diesem Fall kann das enthaltene Element möglicherweise noch andere Elemente auf der Seite beeinflussen, die Nachkommen sind jedoch weiterhin nicht an diesen Berechnungen beteiligt.

Die folgende Demo bietet eine einfache Erklärung dafür, was passiert, wenn das layoutContainment angewendet wird. Wenn Sie auf eines der oberen Felder klicken, wird das Containment angewendet und die roten Pfeile ändern das Erscheinungsbild. Das Erscheinungsbild der roten Pfeile zeigt an, ob die Nachkommen des Felds die anderen Felder auf der Seite während der Layoutberechnung beeinflussen.

Farbe

Der paintContainment-Wert informiert den Browser darüber, dass keiner der Nachkommen des Elements außerhalb des Rahmens des Elements gezeichnet wird. Wenn ein untergeordnetes Element so positioniert ist, dass ein Teil seines Begrenzungsrahmens von den enthaltenen Elementen abgeschnitten wird border-box, darf dieser Teil nicht gestrichen werden. Wenn ein untergeordnetes Element vollständig außerhalb des enthaltenen Elements positioniert border-boxist, wird es überhaupt nicht gezeichnet. Dies ähnelt der Anwendung overflow: hidden;auf das Element, jedoch ohne die Vorteile des Überspringens oder Reduzierens der erforderlichen Berechnungen.

Ein weiterer Vorteil besteht darin, dass das enthaltene Element bei der Durchführung von Malberechnungen möglicherweise die Nachkommen des Elements überspringt, wenn es im Ansichtsfenster nicht sichtbar ist. Ein Beispiel hierfür ist ein Element, das von der Seite links neben dem Ansichtsfenster platziert wird. Wenn das enthaltene Element nicht sichtbar ist, ist dies eine Garantie dafür, dass sein Inhalt nicht sichtbar ist. Daher müssen sie nicht in Lackberechnungen einbezogen werden.

Ein Element mit dem paintContainment wird auch zu einem Containing-Feld für positionierte Nachkommen - z. B. Elemente mit absoluter Positionierung. Das Element erhält auch einen neuen Stapelkontext in Bezug auf die Seite und die z-indexEigenschaft kann verwendet werden. Richtungsmerkmale wie topoder leftgelten jedoch nicht.

Ein Bildlaufelement kann zusätzliche Vorteile erzielen, wenn seine Nachkommen in einer neuen Farbebene platziert werden, die die Bildlaufleistung verbessern kann. Normalerweise können Bildlaufelemente zu ständigen Neulackierungen führen, wenn die Nachkommen während des Bildlaufs erscheinen und verschwinden. Ein Bildlaufelement mit dem Farbbehälter kann möglicherweise dieses ständige Neulackieren von Bildlaufnachkommen überspringen.

Die folgende Demo bietet eine einfache Erklärung dafür, was passiert, wenn das paintContainment angewendet wird. Klicken Sie auf eine beliebige Stelle, um das Containment in der lila Box umzuschalten. Wenn Containment angewendet wird, ändern sich einige der grünen Kästchen im Erscheinungsbild. Das Aussehen der grünen Kästchen zeigt, wie sie gemalt oder nicht gemalt sind.

Größe

Der sizeContainment-Wert informiert den Browser darüber, dass keiner der Nachkommen bei der Durchführung von Layoutberechnungen für die Seite berücksichtigt werden muss. Das enthaltene Element muss heightund widthEigenschaften angewendet wird , oder es wird auf Null Quadrat Pixel kollabieren. Für die Berechnung des Seitenlayouts muss nur das Element selbst 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 ob es überhaupt keine Nachkommen hätte.

Für die vollen Vorteile der Optimierung wird das sizeContainment normalerweise mit anderen Containment-Typen angewendet.

Ein Element mit dem sizeContainment erhält einen neuen Stapelkontext in Bezug auf die Seite, und die z-indexEigenschaft kann verwendet werden. Richtungsmerkmale wie topoder leftgelten jedoch nicht.

Die folgende Demo bietet eine einfache Erklärung dafür, was passiert, wenn sizeContainment angewendet wird. Klicken Sie auf eine beliebige Stelle, um das Containment in der lila Box umzuschalten. Wenn das Containment angewendet wird, ändert sich die Größe des violetten Felds. Standardmäßig wird die Höhe des lila Felds von seinen untergeordneten Feldern definiert, aber bei der Eindämmung muss die Höhe definiert werden. Sobald die Eindämmung angewendet wurde, sind die Nachkommen nicht mehr an größenbezogenen Layoutberechnungen beteiligt.

Stil

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

Die Eigenschaften counter-incrementund counter-setmüssen auf den Unterbaum des enthaltenen Elements beschränkt sein. Wenn es außerhalb des enthaltenen Elements erweitert wird, wird ein neuer Zähler erstellt.

Die Werte der Inhalt Eigenschaft open-quote, close-quote, no-open-quote, und no-close-quotemüssen die darin enthaltenen Elements Unterbaum scoped werden.

Dieser Einschlusswert wird als gefährdet angesehen, aus der Spezifikation entfernt zu werden.

Inhalt

Der contentEinschlusswert ist eine Kombination aus Layout- und Farbeinschlusswerten. Dies entspricht dem Anwenden von Containment auf folgende Weise:

div ( contain: layout paint; )

Alle oben beschriebenen potenziellen Vorteile für jeden Wert stehen dann dem enthaltenen Element zur Verfügung. Diese Eindämmung wird als relativ sicher angesehen, um sie auf mehrere Elemente auf der Seite anzuwenden.

Streng

Der strictContainment - Wert ist eine Kombination aus den layout, paintund sizeEindämmung Werten. Dies entspricht dem Anwenden von Containment auf folgende Weise:

div ( contain: layout paint size; )

Alle oben beschriebenen potenziellen Vorteile für jeden Wert stehen dann dem enthaltenen Element zur Verfügung.

Als der „strengste“ der Containment-Werte sollte dieser Wert mit Bedacht verwendet werden. Dies ist auf die Dimensionsanforderungen zurückzuführen, die an das enthaltene Element gestellt werden. Mit diesen Anforderungen bietet dieser Containment-Wert die potenziellsten Leistungsvorteile von Containment.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom	Feuerfuchs	IE	Kante	Safari
52	69	Nein	79	Nein

Handy / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Nein