Kurzfassung
Mit der neuen CSS-Begrenzungseigenschaft können Entwickler den Umfang der Stile, des Layouts und der Paint-Arbeit des Browsers einschränken.
Sie hat einige Werte, die folgende Syntax ergibt:
contain: none | strict | content | [ size || layout || style || paint ]
Die Version ist in Chrome 52 oder höher bzw. Opera 40 oder höher installiert und wird öffentlich von Firefox unterstützt. Probieren Sie es also aus und lassen Sie uns wissen, wie es Ihnen weiterhilft!
Die „enthalten“-Eigenschaft
Beim Erstellen einer Webanwendung oder sogar einer komplexen Website besteht eine wichtige Leistungssteigerung darin, die Effekte von Stilen, Layout und Farbe einzuschränken. Oft wird bei der Berechnung die gesamte Größe des DOMs als „im Umfang“ betrachtet. Das kann bedeuten, dass der Versuch, eine eigenständige „Ansicht“ in einer Webanwendung zu erstellen, sich als schwierig erweisen: Änderungen in einem Teil des DOMs können sich auf andere Teile auswirken und dem Browser kann nicht mitgeteilt werden, was in den Geltungsbereich fallen oder nicht.
Angenommen, ein Teil Ihres DOMs sieht so aus:
<section class="view">
Home
</section>
<section class="view">
About
</section>
<section class="view">
Contact
</section>
Und Sie fügen ein neues Element zu einer Ansicht hinzu, wodurch Stile, Layout und Paint ausgelöst werden:
<section class="view">
Home
</section>
<section class="view">
About
<div class="newly-added-element">Check me out!</div>
</section>
<section class="view">
Contact
</section>
In diesem Fall ist jedoch das gesamte DOM im Umfang enthalten. Das bedeutet, dass bei den Stil-, Layout- und Paint-Berechnungen alle Elemente berücksichtigt werden müssen, unabhängig davon, ob sie geändert wurden oder nicht. Je größer das DOM, desto mehr Rechenleistung ist erforderlich, sodass Ihre App möglicherweise nicht mehr auf Nutzereingaben reagiert.
Die gute Nachricht ist, dass moderne Browser immer cleverer werden und den Umfang der Stile, des Layouts und der Farbgebung automatisch einschränken, was bedeutet, dass alles schneller geht, ohne dass Sie etwas tun müssen.
Und das Beste ist, dass es eine neue CSS-Eigenschaft gibt, die die Bereichskontrollen an Entwickler übergibt: Begrenzung.
„CSS Begrenzung“ ist eine neue Eigenschaft mit dem Suchbegriff „enthalten“, die vier Werte unterstützt:
layoutpaintsizestyle
Mit jedem dieser Werte kannst du einschränken, wie viel Rendering der Browser ausführen muss. Sehen wir uns die einzelnen Werte etwas genauer an.
Layout (enthält: Layout)
Die Begrenzung des Layouts ist, neben contain: paint, wahrscheinlich der größte Vorteil von Begrenzungen.
Das Layout ist normalerweise auf Dokumentebene festgelegt, das heißt, es wird proportional zur Größe des DOM skaliert. Wenn Sie also die Eigenschaft left eines Elements ändern, muss möglicherweise jedes einzelne Element im DOM geprüft werden.
Wenn Sie die Begrenzung an dieser Stelle aktivieren, kann die Anzahl der Elemente auf wenige statt des gesamten Dokuments reduziert werden. Dies spart dem Browser eine Menge unnötiger Arbeit und verbessert die Leistung erheblich.
Farbe (enthält: Farbe)
Farbabstriche sind ein weiterer unglaublich nützlicher Vorteil der Begrenzung. Die Farbbegrenzung reduziert im Grunde das betreffende Element, hat aber auch einige andere Nebeneffekte:
- Es dient als Binderblock für absolut positionierte und feste Positionselemente. Das bedeutet, dass alle untergeordneten Elemente auf der Grundlage des Elements mit
contain: paintund nicht auf einem anderen übergeordneten Element wie z. B. dem Dokument positioniert werden. - Es wird zu einem Stapelkontext. Das bedeutet, dass sich Dinge wie „
z-index“ auf das Element auswirken und untergeordnete Elemente entsprechend dem neuen Kontext gestapelt werden. - Dadurch entsteht ein neuer Formatierungskontext. Wenn Sie beispielsweise ein Element auf Blockebene mit Begrenzungen für den Farbton haben, wird es als neue, unabhängige Layoutumgebung behandelt. Das bedeutet, dass sich ein Layout außerhalb des Elements in der Regel nicht auf die untergeordneten Elemente des Elements auswirkt, in denen es sich befindet.
Größe (enthält: Größe)
Das contain: size bedeutet, dass die untergeordneten Elemente des Elements keinen Einfluss auf die Größe des übergeordneten Elements haben und dass die abgeleiteten oder deklarierten Dimensionen verwendet werden. Wenn Sie also contain: size festlegen, aber keine Abmessungen für das Element angeben (entweder direkt oder über Flex-Eigenschaften), wird es mit 0 x 0 Pixel gerendert.
Die Größenbegrenzung ist im Grunde eine Gürtel-und-Geschirr-Maßnahme, um sicherzustellen, dass Sie sich bei der Größenanpassung nicht auf untergeordnete Elemente stützen. Sie allein bringt jedoch keine großen Leistungsvorteile mit sich.
Stil (contains: style)
Es kann schwierig sein, vorherzusagen, welche Auswirkungen eine Änderung der Stile eines Elements auf den DOM-Baum hat. Ein Beispiel hierfür sind CSS-Zähler, bei denen sich die Änderung eines Zählers in einer untergeordneten Datei auf Zählerwerte auswirken kann, die denselben Namen haben, der auch an anderer Stelle im Dokument verwendet wird. Ist contain: style festgelegt, werden Stiländerungen nicht über das Element hinaus übernommen, in dem sie enthalten ist.
Um ganz sicherzugehen: Was contain: style nicht bietet, ist der Stil eines Bereichs, wie er im Shadow-DOM ist. Bei der Begrenzung geht es hier nur darum, die Teile der Baumstruktur einzuschränken, die bei der Änderung von Stilen berücksichtigt werden, nicht, wenn sie deklariert werden.
Strenge Regeln und Inhaltsbeschränkungen
Sie können auch Keywords wie contain: layout paint kombinieren. Dadurch werden nur diese Verhaltensweisen auf ein Element angewendet. „ent“ unterstützt jedoch auch zwei zusätzliche Werte:
contain: strictbedeutet dasselbe wiecontain: size layout paint.contain: contentbedeutet dasselbe wiecontain: layout paint.
Die strikte Begrenzung eignet sich hervorragend, wenn Sie die Größe des Elements im Voraus kennen oder die Abmessungen beibehalten möchten. Wenn Sie jedoch eine strikte Begrenzung ohne Maße deklarieren, kann das Element aufgrund der implizierten Größenbegrenzung als 0 x 0 Pixel große Box dargestellt werden.
Die Inhaltsbeschränkung hingegen bietet erhebliche Verbesserungen, Sie müssen die Abmessungen des Elements jedoch nicht im Voraus kennen oder angeben.
Von diesen beiden Optionen sollte standardmäßig contain: content verwendet werden. Wenn contain: content nicht stark genug für deine Anforderungen ist, solltest du die strikte Eindämmung eher als Notlösung betrachten.
Teilen Sie uns mit, wie Sie abgeschnitten haben
Eine Begrenzung ist eine gute Möglichkeit, um dem Browser anzuzeigen, was auf Ihrer Seite isoliert bleiben soll. Probieren Sie den Browser in Chrome 52 oder höher aus und teilen Sie uns Ihre Meinung mit!