Kurzfassung
Mit der neuen CSS-Begrenzungseigenschaft können Entwickler den Umfang der Stile, Layouts und Darstellungselemente des Browsers einschränken.
Sie hat einige Werte, die ihre Syntax so sieht:
contain: none | strict | content | [ size || layout || style || paint ]
Die Funktion ist in Chrome 52 und höher sowie in Opera 40 oder höher verfügbar und wird öffentlich von Firefox unterstützt. Probieren Sie es also aus und teilen Sie uns mit, wie es Ihnen geht.
Die Eigenschaft "include"
Bei der Entwicklung einer Webanwendung oder selbst einer komplexen Website besteht eine wesentliche Herausforderung bei der Leistung darin, die Auswirkungen von Stilen, Layout und Farbe zu begrenzen. Oftmals wird das gesamte DOM für die Berechnung als "im Umfang" eingestuft. Dies kann bedeuten, dass es schwierig sein kann, eine eigenständige "Ansicht" in einer Webanwendung zu erstellen: Änderungen in einem Teil des DOMs können sich auf andere Teile auswirken und es gibt keine Möglichkeit, dem Browser mitzuteilen, was im Geltungsbereich oder außerhalb des Geltungsbereichs liegen soll.
Nehmen wir zum Beispiel an, dass ein Teil Ihres DOMs wie folgt aussieht:
<section class="view">
Home
</section>
<section class="view">
About
</section>
<section class="view">
Contact
</section>
Und Sie hängen ein neues Element an eine Ansicht an, wodurch Stile, Layout und Darstellung 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 effektiv im Umfang, d. h. bei Stil-, Layout- und Farbberechnungen müssen alle Elemente berücksichtigt werden, unabhängig davon, ob sie geändert wurden oder nicht. Je größer das DOM, desto mehr Rechenaufwand ist erforderlich. Das kann dazu führen, dass Ihre App nicht mehr auf Nutzereingaben reagiert.
Die gute Nachricht ist, dass moderne Browser wirklich clever werden, den Umfang von Stilen, Layout und Darstellung automatisch zu begrenzen, was bedeutet, dass die Dinge schneller werden, ohne dass Sie etwas tun müssen.
Aber die bessere Nachricht ist, dass es eine neue CSS-Property gibt, mit der Entwickler den Zugriffsbereich steuern können: Begrenzung.
Die CSS-Begrenzung ist eine neue Eigenschaft mit dem Schlüsselwort "contains", das vier Werte unterstützt:
layoutpaintsizestyle
Mit jedem dieser Werte können Sie einschränken, wie viel Rendering-Arbeit der Browser ausführen muss. Sehen wir uns diese Optionen etwas genauer an.
Layout (enthält: Layout)
Die Layoutbegrenzung ist neben contain: paint wahrscheinlich der größte Vorteil der Begrenzung.
Das Layout ist normalerweise dokumentenbezogen, d. h. es wird proportional zur Größe des DOMs skaliert. Wenn Sie also die left-Eigenschaft eines Elements ändern, muss möglicherweise jedes einzelne Element im DOM geprüft werden.
Wenn Sie hier die Begrenzung aktivieren, können Sie die Anzahl der Elemente auf nur eine Handvoll und nicht auf das gesamte Dokument reduzieren, was dem Browser eine Menge unnötigen Aufwand erspart und die Leistung erheblich verbessert.
Farbe (enthält: Farbe)
Ein weiterer unglaublich nützlicher Vorteil der Begrenzung ist das Abdecken von Farbumfang. Die Farbeindämmung schneidet das betreffende Element im Wesentlichen ab, hat aber auch einige andere Nebenwirkungen:
- Sie fungiert als einschließender Block für absolut positionierte und fixierte Positionselemente. Das bedeutet, dass alle untergeordneten Elemente basierend auf dem Element mit
contain: paintund nicht nach einem anderen übergeordneten Element wie beispielsweise dem Dokument positioniert werden. - Sie werden zu einem Stapelkontext. Das bedeutet, dass Elemente wie
z-indexeine Auswirkung auf das Element haben und die untergeordneten Elemente entsprechend dem neuen Kontext gestapelt werden. - Sie wird zu einem neuen Formatierungskontext. Das bedeutet, dass beispielsweise ein Element auf Blockebene mit Farbeindämmung als neue, unabhängige Layoutumgebung behandelt wird. Das bedeutet, dass ein Layout außerhalb des Elements sich in der Regel nicht auf die untergeordneten Elemente des Elements auswirkt.
Größe (enthält: Größe)
contain: size bedeutet, dass die untergeordneten Elemente 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), würde es bei 0 × 0 px gerendert.
Bei der Größenbegrenzung handelt es sich im Grunde um eine Kombination aus Gürtel und Klammern, um sicherzustellen, dass Sie bei der Größenbestimmung keine untergeordneten Elemente verwenden, sie bietet jedoch an sich keinen großen Leistungsvorteil.
Stil (enthält: Stil)
Es kann schwierig sein, vorherzusehen, welche Auswirkungen die Änderung der Stile eines Elements auf den DOM-Baum in der Baumstruktur hat. Ein Beispiel hierfür ist bei CSS-Zählern, bei denen das Ändern eines Zählers in einem untergeordneten Element sich auf Zählerwerte mit demselben Namen auswirken kann, die an anderer Stelle im Dokument verwendet werden. Wenn contain: style festgelegt ist, werden Stiländerungen nicht über das Element hinaus übernommen, in dem sie enthalten ist.
Um es noch einmal klarzustellen: contain: style bietet nicht die bereichsbezogenen Stile, wie man es vom Shadow DOM unterscheidet. Bei der Begrenzung geht es hier lediglich darum, die Teile des Baums einzuschränken, die beim Ändern von Stilen in Betracht gezogen werden, nicht bei ihrer Deklaration.
Strikte Begrenzung und Inhaltseindämmung
Sie können auch Keywords wie contain: layout paint kombinieren. Dadurch werden nur diese Verhaltensweisen auf ein Element angewendet. Enthalten unterstützt aber auch zwei zusätzliche Werte:
contain: strictbedeutet dasselbe wiecontain: size layout paintcontain: contentbedeutet dasselbe wiecontain: layout paint
Die Verwendung einer strikten Begrenzung ist gut, wenn Sie die Größe des Elements im Voraus kennen oder seine Abmessungen reservieren möchten. Wenn Sie eine strikte Begrenzung ohne Abmessungen deklarieren, wird das Element jedoch aufgrund der implizierten Größenbeschränkung möglicherweise als Feld mit einer Größe von 0 x 0 Pixel gerendert.
Die Inhaltseindämmung hingegen bietet erhebliche Verbesserungen des Umfangs. Sie müssen die Abmessungen des Elements aber nicht im Voraus kennen oder festlegen.
Von beiden ist contain: content die Standardeinstellung, die Sie verwenden sollten. Die strikte Begrenzung ist eher eine Notlösung, wenn die contain: content nicht stark genug für deine Anforderungen ist.
Teilen Sie uns mit, wie Sie
Die Begrenzung ist ein guter Anfang, um dem Browser zu zeigen, was auf Ihrer Seite isoliert bleiben soll. Probieren Sie es in Chrome 52+ aus und teilen Sie uns Ihre Meinung mit!