Verwendung von CSS Containment
CSS Containment verbessert die Leistung von Webseiten, indem es dem Browser ermöglicht, einen Unterbaum der Seite vom Rest der Seite zu isolieren. Wenn der Browser weiß, dass ein Teil der Seite unabhängig vom restlichen Inhalt ist, kann das Rendering optimiert und die Leistung verbessert werden.
Die Eigenschaften contain
und content-visibility
ermöglichen es Entwicklern, Benutzeragenten darüber zu informieren, ob ein Element seine Inhalte überhaupt rendern soll und ob es seine Inhalte rendern soll, wenn es nicht im Sichtbereich ist. Der Benutzeragent wendet dann, wenn angebracht, Containment auf Elemente an, sodass Layout und Rendering möglicherweise erst bei Bedarf vorgenommen werden.
Dieser Leitfaden beschreibt die grundlegenden Ziele von CSS Containment und wie man contain
und content-visibility
für eine bessere Benutzererfahrung nutzt.
Einfaches Beispiel
Webseiten enthalten oft mehrere Abschnitte, die logisch unabhängig voneinander sind. CSS Containment ermöglicht es, sie wirklich unabhängig voneinander in Bezug auf das Rendering zu behandeln.
Zum Beispiel enthalten Blogs gewöhnlich mehrere Artikel, die jeweils eine Überschrift und Inhalte enthalten, wie im folgenden Markup dargestellt.
<h1>My blog</h1>
<article>
<h2>Heading of a nice article</h2>
<p>Content here.</p>
</article>
<article>
<h2>Another heading of another article</h2>
<p>More content here.</p>
</article>
Mit CSS wenden wir die Eigenschaft contain
mit dem Wert content
auf jeden Artikel an. Der Wert content
ist eine Abkürzung für contain: layout paint style
:
article {
contain: content;
}
Logisch gesehen ist jeder Artikel unabhängig von den anderen Artikeln auf der Seite. Diese Information ist etwas, das dem Webentwickler, der die Seite erstellt, normalerweise bekannt ist und wahrscheinlich recht offensichtlich erscheint. Allerdings wissen Browser nicht, welches die Absicht Ihres Inhalts ist, und können nicht davon ausgehen, dass ein Artikel oder ein anderer Abschnitt des Inhalts völlig eigenständig ist.
Diese Eigenschaft bietet eine Möglichkeit, dem Browser dies zu erklären und ihm die ausdrückliche Erlaubnis zu geben, Leistungsoptimierungen vorzunehmen. Sie teilt dem Browser mit, dass das interne Layout des Elements vollständig vom Rest der Seite getrennt ist und dass alles über das Element innerhalb seiner Grenzen gezeichnet wird. Nichts kann sichtbar überlaufen.
Durch das Setzen von contain: content
auf jedem <article>
haben wir dies angegeben; wir haben dem Browser mitgeteilt, dass jeder Artikel unabhängig ist. Der Browser kann diese Information dann nutzen, um Entscheidungen darüber zu treffen, wie jeder <article>
des Inhalts gerendert wird. Zum Beispiel könnte es nicht-rendern von Artikeln, die sich außerhalb des sichtbaren Bereichs befinden.
Wenn zusätzliche Artikel am Ende der Seite angehängt werden, muss der Browser das Layout nicht neu berechnen oder den vorherigen Inhalt neu zeichnen; er muss auch keinen Bereich außerhalb des Unterbaums des beinhaltenden Elements berühren. Wenn Box-Modell-Eigenschaften jedoch abhängig sind, muss der Browser das Layout neu berechnen und neu zeichnen. Zum Beispiel, wenn das <article>
so gestylt ist, dass seine Größe von seinem Inhalt abhängt (z.B. mit height: auto
), muss der Browser seine Größe berücksichtigen.
Schlüsselkonzepte und Terminologie
contain
Werte
Es gibt vier Arten von Containment: Layout, Paint, Größe und Stil. Verwenden Sie die Eigenschaft contain
, um den Typ oder die Typen anzugeben, die Sie auf ein Element anwenden möchten, indem Sie eine beliebige Kombination dieser Typen einschließen.
Layout Containment
article {
contain: layout;
}
Layout ist normalerweise auf das gesamte Dokument bezogen, was bedeutet, dass wenn Sie ein Element verschieben, das gesamte Dokument so behandelt werden muss, als könnten sich Dinge überall bewegt haben. Durch die Verwendung von contain: layout
können Sie dem Browser mitteilen, dass er nur dieses Element überprüfen muss — alles innerhalb des Elements bezieht sich nur auf dieses Element und beeinträchtigt nicht den Rest der Seite, wobei die unterbringende Box einen unabhängigen Formatierungskontext etabliert.
Zusätzlich:
float
Layout wird unabhängig innerhalb des angegebenen Elements durchgeführt.- Ränder werden nicht über eine Layout-Containment-Grenze hinweg kollabieren.
- Der Layout-Container ist ein containing block für
absolute
- undfixed
-positionierte Nachfahren. - Die beinhaltende Box erstellt einen stacking context, daher kann
z-index
verwendet werden.
Hinweis:
Die Werte style
und layout
von contain
werden automatisch angewendet, wenn die Eigenschaften container-type
und container-name
verwendet werden.
Paint Containment
article {
contain: paint;
}
Paint Containment schneidet im Wesentlichen die Box an der Polsterrandkante der Hauptbox. Es kann keinen sichtbaren Überlauf geben. Die gleichen zusätzlichen Anmerkungen gelten für paint
Containment wie für layout
Containment (siehe oben).
Ein weiterer Vorteil ist, dass, wenn das mit Containment versehene Element vom Bildschirm ist, der Browser seine Kindelemente nicht zeichnen muss — diese sind auch vom Bildschirm, da sie komplett von dieser Box enthalten sind.
Größe Containment
article {
contain: size;
}
Größen-Containment bietet eigenständig nicht viel in Bezug auf Leistungsoptimierungen. Größe Containment bedeutet jedoch, dass die Größe der Kinder eines größenvermittelten Elements die Größe des Elements selbst nicht beeinflussen kann — seine Größe wird so berechnet, als hätte es keine Kinder.
Wenn Sie contain: size
auf ein Element setzen, müssen Sie die Größe des Elements mit contain-intrinsic-size
oder den Langformen contain-intrinsic-width
und contain-intrinsic-height
, in dieser Reihenfolge angeben. Wenn keine Größe festgelegt ist, besteht die Gefahr, dass das Element in den meisten Fällen keine Größe hat.
article {
contain: size;
contain-intrinsic-size: 100vw auto none;
}
Stil Containment
article {
contain: style;
}
Trotz des Namens bietet Stil-Containment keine gesonderten Stile wie mit dem Shadow DOM oder @scope
.
Der Hauptanwendungsfall für den style
-Wert besteht darin, Situationen zu verhindern, in denen ein CSS-Zähler innerhalb eines Elements geändert werden könnte, was dann den Rest des Baums beeinflussen könnte.
Die Verwendung von contain: style
stellt sicher, dass die Eigenschaften counter-increment
und counter-set
neue Zähler erstellen, die nur auf diesen Unterbaum beschränkt sind.
Sie können mehr als einen Containment-Typ einschließen, indem Sie mehrere durch Leerzeichen getrennte Werte einfügen, wie contain: layout paint
oder indem Sie einen der beiden Sonderwerte verwenden.
Sonderwerte
Es gibt zwei Sonderwerte von contain
, die eine Abkürzung für die ersten drei oder alle vier Containment-Typen sind:
content
strict
Wir haben den ersten bereits im obigen Beispiel gesehen. Die Verwendung von contain: content
schaltet das Layout, Paint und Style Containment ein. Da es size
auslässt, ist es ein sicherer Wert, der weit verbreitet angewendet werden kann.
Die Deklaration contain: strict
, die sich genauso verhält wie die Deklaration contain: size layout paint style
(die vier durch Leerzeichen getrennte Werte enthält), bietet das meiste Containment. Es ist riskanter zu verwenden, da es size
Containment anwendet; es besteht das Risiko, dass eine Box aufgrund ihrer Abhängigkeit von der Größe ihrer Kinder keine Größe haben könnte.
Um dieses Risiko zu vermeiden, legen Sie immer eine Größe fest, wenn Sie strict
verwenden:
article {
contain: strict;
contain-intrinsic-size: 80vw auto none;
}
Das oben Genannte ist dasselbe wie:
article {
contain: size layout paint style;
contain-intrinsic-size: 80vw auto none;
}
content-visibility
Wenn Sie viele Inhalte haben, die von starkem Containment profitieren würden und oft vom Bildschirm sind — zum Beispiel, wenn alle Ihre Blog-Beiträge auf der Blog-Startseite als unendlich scrollbares Blog sichtbar sind — kann content-visibility: auto
verwendet werden, um alle Containments auf einmal anzuwenden.
Die Eigenschaft content-visibility
steuert, ob ein Element seine Inhalte überhaupt rendert und erzwingt gleichzeitig einen starken Satz von Containments, wodurch Benutzeragenten möglicherweise große Mengen an Layout- und Renderarbeit weglassen können, bis sie benötigt werden. Sie ermöglicht es dem Benutzeragenten, die Renderingarbeit eines Elements (einschließlich Layout und Zeichnen) zu überspringen, bis sie benötigt wird — was das initiale Laden der Seite viel schneller macht.
Ihre möglichen Werte sind:
visible
: Das Standardverhalten — die Inhalte eines Elements werden wie normal angeordnet und gerendert.hidden
: Das Element überspringt seine Inhalte. Die übersprungenen Inhalte sind nicht für Benutzeragenten-Funktionen wie Seiten-finden, Tab-Reihenfolgenavigation usw. zugänglich, noch auswählbar oder fokussierbar.auto
: Das Element aktiviert Layout, Stil und Paint Containment, als wärecontain: content
gesetzt. Wenn das Element für den Benutzer nicht relevant ist, überspringt es auch seine Inhalte. Anders alshidden
, sind die übersprungenen Inhalte weiterhin für Benutzerinteraktionen verfügbar, bleiben fokussierbar, auswählbar, in regulärer Tab-Reihenfolge und für inhaltliche Suchvorgänge zugänglich.
Relevant für den Benutzer
Benutzeragenten haben ein Konzept von Inhalten, die für den Benutzer relevant sind. Ein Element wird "für den Benutzer relevant", wenn eine der folgenden Bedingungen zutrifft:
- Das Element erscheint im Ansichtsfenster oder in einem vom Benutzeragenten definierten Rand um das Ansichtsfenster (50 % der Ansichtsfensterabmessungen, um der App Zeit zu geben, sich auf Änderungen der Element-Sichtbarkeit vorzubereiten).
- Das Element oder seine Inhalte erhalten den Fokus.
- Das Element oder seine Inhalte werden ausgewählt, beispielsweise durch Ziehen über den Text mit dem Mauszeiger oder durch eine andere Hervorhebungsoperation.
- Das Element oder seine Inhalte werden in die obere Ebene verschoben.
Wenn content-visibility: auto
gesetzt ist und der Browser feststellt, dass der Inhalt für den Benutzer relevant ist, wird der Browser diesen Inhalt rendern.
Überspringt seine Inhalte
Wenn Sie content-visibility: hidden
auf ein Element setzen, teilen Sie dem Browser mit, dass es für den Benutzer nicht relevant ist und daher seine Inhalte übersprungen und nicht gerendert werden sollen. Dies hilft, die Leistung zu verbessern.
Der Browser wird die Inhalte eines Elements auch überspringen, wenn content-visibility: auto
darauf gesetzt ist und der Browser feststellt, dass sein Inhalt nicht relevant für den Benutzer ist.
Wenn ein Element seine Inhalte überspringt:
- Sind Layout-, Stil-, Paint- und Größen-Containment aktiviert.
- Werden seine Inhalte nicht gezeichnet, als wäre
visibility: hidden
darauf gesetzt. - Erhalten seine Inhalte keine Zeigereignisse, als wären
pointer-events: none
darauf gesetzt.
Dies geschieht in beiden der oben genannten Fälle, aber mit content-visibility: auto
können die Inhalte durchsucht, fokussiert und anderweitig von nicht relevant zu relevant bewegt werden. Dies ist nicht der Fall bei content-visibility: hidden
.
Hinweis:
Um die Übergang von content-visibility: hidden
zu einem sichtbaren Wert zu animieren, müssen Sie transition-behavior: allow-discrete
und @starting-style
Stile setzen. Weitere Informationen finden Sie unter Übergänge von display
und content-visibility
.
Siehe auch
- CSS Containment Modul
- Lernen: CSS-Leistungsoptimierung
- CSS Container Queries
- Eine Einführung in CSS Containment über Igalia.com (2019)
- Das
contentvisibilityautostatechange
Ereignis