Unterstützung von Browsern bei der Optimierung mit der CSS Contain-Eigenschaft

In diesem Artikel werde ich eine CSS-Spezifikation vorstellen, die gerade zu einer W3C-Empfehlung geworden ist. Die CSS Containment Specification definiert eine einzelne Eigenschaft, contain , und sie kann Ihnen helfen, dem Browser zu erklären, welche Teile Ihres Layouts unabhängig sind und nicht neu berechnet werden müssen, wenn sich ein anderer Teil des Layouts ändert.

Obwohl diese Eigenschaft aus Gründen der Leistungsoptimierung existiert, kann sie sich auch auf das Layout Ihrer Seite auswirken. Daher erkläre ich in diesem Artikel die verschiedenen Arten von Containment, von denen Sie profitieren können, aber auch die Dinge, auf die Sie achten müssen, wenn Sie contain auf Elemente auf Ihrer Website anwenden.

Das Problem der Layout-Neuberechnung

Wenn Sie unkomplizierte Webseiten erstellen, die Elemente nach dem Laden nicht dynamisch mit JavaScript hinzufügen oder ändern, brauchen Sie sich keine Gedanken über das Problem zu machen, das CSS Containment löst. Der Browser muss Ihr Layout nur einmal berechnen, während die Seite geladen wird.

Containment wird nützlich, wenn Sie Elemente zu Ihrer Seite hinzufügen möchten, ohne dass der Benutzer sie neu laden muss. In meinem Beispiel habe ich eine große Liste von Ereignissen erstellt. Wenn Sie auf die Schaltfläche klicken, wird das erste Ereignis geändert, ein schwebendes Element hinzugefügt und der Text geändert:

Wenn der Inhalt unserer Box geändert wird, muss der Browser berücksichtigen, dass sich möglicherweise Elemente geändert haben. Browser können im Allgemeinen ziemlich gut damit umgehen, da dies häufig vorkommt. Als Entwickler wissen Sie jedoch, ob jede der Komponenten unabhängig ist und dass eine Änderung an einer die anderen nicht beeinflusst. Daher wäre es schön, wenn Sie dies dem Browser über Ihr CSS mitteilen könnten. Dies ist, was Containment und die CSS- contain Eigenschaft Ihnen bieten.

Wie hilft Containment?

Ein HTML-Dokument ist eine Baumstruktur, die Sie sehen können, wenn Sie ein beliebiges Element mit DevTools untersuchen. In meinem obigen Beispiel identifiziere ich ein Element, das ich ändern möchte, indem ich JavaScript verwende, und nehme dann einige Änderungen an den Interna vor. (Das bedeutet, dass ich nur Dinge innerhalb des Unterbaums für dieses Listenelement ändere.)

Das Anwenden der Eigenschaft „ contain “ auf ein Element teilt dem Browser mit, dass Änderungen auf den Teilbaum dieses Elements beschränkt sind, sodass der Browser alle möglichen Optimierungen vornehmen kann – in der Gewissheit, dass sich außerhalb dieses Elements nichts anderes ändert. Was genau ein bestimmter Browser tun kann, hängt von der Engine ab. Die CSS-Eigenschaft gibt Ihnen als Entwickler und Experte für dieses Layout einfach die Möglichkeit, es mitzuteilen.

In vielen Fällen können Sie gleich loslegen und mit der Verwendung der Eigenschaft „ contain “ beginnen, aber die unterschiedlichen Werte bringen einige potenzielle Nebenwirkungen mit sich, die Sie verstehen sollten, bevor Sie die Eigenschaft zu Elementen auf Ihrer Website hinzufügen.

Eindämmung verwenden

Die Eigenschaft contain " kann drei verschiedene Arten von Containment festlegen:

• layout
• paint
• size

Hinweis : Es gibt einen style in der Level-2-Spezifikation. Es wurde aus Level 1 entfernt, erscheint also nicht in der Empfehlung und ist nicht in Firefox implementiert.

Layout

Layout Containment bringt die größten Vorteile. Verwenden Sie das folgende Snippet, um die Layoutbegrenzung zu aktivieren:

 .item { contain: layout; }

Wenn die Layout-Eingrenzung aktiviert ist, weiß der Browser, dass nichts außerhalb des Elements das interne Layout beeinflussen kann und nichts innerhalb des Elements irgendetwas am Layout der Dinge außerhalb ändern kann. Dies bedeutet, dass es alle möglichen Optimierungen für dieses Szenario vornehmen kann.

Ein paar zusätzliche Dinge passieren, wenn die Layout-Containment aktiviert ist. Das sind alles Dinge, die sicherstellen, dass diese Kiste und ihr Inhalt unabhängig vom Rest des Baums sind.

Die Box stellt einen eigenständigen Formatierungskontext her. Dadurch wird sichergestellt, dass der Inhalt der Box in der Box verbleibt – insbesondere Schwimmer werden zurückgehalten und Ränder werden nicht durch die Box fallen. Dies ist das gleiche Verhalten, das wir aktivieren, wenn wir display: flow-root verwenden, wie in meinem Artikel „Understanding CSS Layout And The Block Formatting Context“ erklärt. Wenn ein Float aus Ihrer Box herausragen könnte, wodurch der folgende Text um den Float herumfließt, wäre dies eine Situation, in der das Element das Layout der Dinge außerhalb ändert, was es zu einem schlechten Kandidaten für die Eindämmung macht.

Die umschließende Box fungiert als umschließender Block für alle Nachkommen mit absoluter oder fester Position. Dies bedeutet, dass es sich so verhält, als ob Sie position: relative auf die von Ihnen angewendete Box verwendet hätten. contain: layout .

Die Box schafft auch einen Stapelkontext . Daher arbeitet z-index mit diesem Element, seine untergeordneten Elemente werden basierend auf diesem neuen Kontext gestapelt.

Wenn wir uns das Beispiel ansehen, diesmal mit " contain: layout ", können Sie sehen, dass das Floating-Element, wenn es eingeführt wird, nicht mehr unten aus der Box herausragt. Dies ist unser neuer Blockformatierungskontext in Aktion, der den Float enthält.

Malen

Verwenden Sie Folgendes, um die Farbbegrenzung zu aktivieren:

 .item { contain: paint; }

Bei aktiviertem Paint Containment treten die gleichen Nebeneffekte wie beim Layout Containment auf: Die Containerbox wird zu einem unabhängigen Formatierungskontext, einem Containerblock für positionierte Elemente und stellt einen Stapelkontext her.

Paint Containment zeigt dem Browser an, dass Elemente innerhalb des enthaltenden Blocks außerhalb der Grenzen dieser Box nicht sichtbar sind. Der Inhalt wird im Wesentlichen auf die Box geclippt.

Wir können dies anhand eines einfachen Beispiels sehen. Selbst wenn wir unserer Karte eine Höhe geben, ragt der schwebende Gegenstand immer noch aus dem Boden der Box heraus, da der Schwimmer aus dem Fluss genommen wird.

Bei aktivierter Farbbegrenzung wird das schwebende Element jetzt auf die Größe der Box zugeschnitten. Nichts kann außerhalb der Grenzen des Elements gemalt werden, das mit contain: paint angewendet wird.

Größe

Die Größenbeschränkung ist der Wert, der Ihnen am ehesten ein Problem bereiten wird, wenn Sie nicht genau wissen, wie er funktioniert. Um die Größenbeschränkung anzuwenden, verwenden Sie:

 .item { contain: size; }

Wenn Sie die Größenbeschränkung verwenden, teilen Sie dem Browser mit, dass Sie die Größe der Box kennen und sie sich nicht ändern wird. Dies bedeutet, dass eine Box, deren Größe in der Blockdimension automatisch angepasst wird, so behandelt wird, als hätte der Inhalt keine Größe, daher wird die Box zusammengeklappt, als hätte sie keinen Inhalt.

Im Beispiel unten habe ich dem li keine Höhe gegeben; Sie haben auch contain: size angewendet. Sie können sehen, dass alle Elemente zusammengebrochen sind, als ob sie überhaupt keinen Inhalt hätten, was zu einer sehr eigenartig aussehenden Auflistung führt!

Wenn Sie den Boxen eine Höhe zuweisen, wird die Höhe berücksichtigt, wenn „ contain: size “ verwendet wird. Allein die Größenbeschränkung erstellt keinen neuen Formatierungskontext und enthält daher keine Gleitkommazahlen und Ränder, wie dies bei Layout- und Farbbeschränkungen der Fall ist. Es ist weniger wahrscheinlich, dass Sie es alleine verwenden würden; Stattdessen würden Sie es höchstwahrscheinlich zusammen mit anderen Werten von " contain " anwenden, um die größtmögliche Eindämmung zu erhalten.

Kurzschriftwerte

In den meisten Fällen können Sie einen von zwei Kurzschreibwerten verwenden, um das Beste aus der Eindämmung herauszuholen. Verwenden Sie zum Aktivieren von Layout- und Farbbegrenzungen include contain: content; , und um alle möglichen Containments zu aktivieren (wobei zu beachten ist, dass Elemente, die keine Größe haben, dann zusammenbrechen), verwenden Sie contain: strict .

Die Spezifikation sagt:

„ contain: content ist einigermaßen „sicher“ für eine breite Anwendung; Seine Auswirkungen sind in der Praxis ziemlich gering, und die meisten Inhalte werden nicht mit seinen Einschränkungen kollidieren. Da es jedoch keine Größenbeschränkung anwendet, kann das Element immer noch auf die Größe seines Inhalts reagieren, was dazu führen kann, dass die Layout-Invalidierung weiter oben im Baum als gewünscht durchsickert. Verwenden Sie contain: strict , wenn möglich, um so viel Containment wie möglich zu erreichen.“

Wenn Sie also die Größe der Elemente nicht im Voraus kennen und verstehen, dass Gleitkommazahlen und Ränder enthalten sind, verwenden Sie „ contain: content “. Wenn Sie die Größe von Gegenständen kennen und sich über die anderen Nebenwirkungen der Eindämmung freuen, verwenden Sie contain: strict . Der Rest liegt am Browser, Sie haben Ihren Teil dazu beigetragen, indem Sie erklärt haben, wie Ihr Layout funktioniert.

Kann ich Containment jetzt verwenden?

Die CSS Containment-Spezifikation ist jetzt eine W3C-Empfehlung, die wir manchmal als Webstandard bezeichnen. Damit die Spezifikation dieses Stadium erreicht, musste es zwei Implementierungen der Funktion geben, die wir sowohl in Firefox als auch in Chrome sehen können:

Da diese Eigenschaft für den Benutzer transparent ist, ist es völlig sicher, sie zu jeder Site hinzuzufügen, selbst wenn Sie viele Besucher in Browsern haben, die sie nicht unterstützen. Wenn der Browser Containment nicht unterstützt, erhält der Besucher die Erfahrung, die er normalerweise macht, diejenigen, die Browser unterstützen, erhalten die verbesserte Leistung.

Ich würde vorschlagen, dass dies eine großartige Sache ist, um sie zu allen Komponenten hinzuzufügen, die Sie in einer Komponenten- oder Musterbibliothek erstellen. Wenn Sie auf diese Weise arbeiten, ist es wahrscheinlich, dass jede Komponente so konzipiert ist, dass sie eine unabhängige Sache ist, die andere Elemente auf der nicht beeinflusst Seite, wodurch contain: content eine nützliche Ergänzung ist.

Wenn Sie also eine Seite haben, die nach dem Laden Inhalte zum DOM hinzufügt, würde ich empfehlen, es auszuprobieren – wenn Sie interessante Ergebnisse erhalten, lassen Sie es mich in den Kommentaren wissen!

Ähnliche Resourcen

Die folgenden Ressourcen geben Ihnen weitere Einzelheiten zur Implementierung von Containment und potenziellen Leistungsvorteilen:

• „Die contain CSS-Eigenschaft“, MDN-Webdokumentation
• „CSS-Eindämmung in Chrome 52“, Google-Entwickler
• „CSS Containment Module Level 1“, W3C-Empfehlung
• „Eine Einführung in die CSS-Eindämmung“, Manuel Rego Casasnovas