Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Mit Hilfe von der CSS-Eigenschaft contain können Elemente und deren Inhalte, so weit wie möglich, unabhängig vom restlichen Dokumenten-Baum gerendert werden. Layout, Farben, Stile und Größen, beziehungsweise eine Kombination aus diesen Eigenschaften können vom Browser für einen begrenzten Bereich neu berechnet werden, ohne dass das ganze Dokument neu gerendert werden muss. Hierdurch kann ein deutlicher Performance-Boost der Website erreicht werden.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

Ziel und Einsatz von CSS Containment

Das Ziel von CSS Contaimnent ist es, die Rendering-Leistung von Websites durch die Angabe einer CSS-Eigenschaft (contain) zu verbessern. Hierbei werden einzelne Komponenten in »Teilbäume« isoliert, sodass sie vom Browser unabhängig vom restlichen Dokumenten-Baum interpretiert und gerendert werden können.

Gerade bei komplexen Websites, die komponentenbasiert aufgebaut sind, lohnt sich der Einsatz von CSS Containment erheblich.

Wichtig! Die Angabe von contain ist nicht dazu gedacht, das Layout optisch zu verändern. Es ist eine Art »Tuning« der Seite, welches dem Browser zusätzliche Informationen gibt, wie er einzelne Komponenten interpretieren soll.

Werte und Syntax von der CSS-Eigenschaft contain

Die CSS-Eigenschaft contain hat vier verschiedene Werte, die zusätzlich beliebig kombiniert werden können, auch Kurzschreibweisen sind möglich, auf die wir später im Artikel eingehen. Standardmäßig ist contain auf none gesetzt.

contain: layout;
contain: paint
contain: size;
contain: style;

Was bewirken die einzelnen Werte?

layout

Der Wert layout auf einer Komponente gibt an, dass diese Komponente inkl. ihrer Kind-Elemente unabhängig vom restlichen Layout der Seite ist. Das Layout wird nicht von außen beeinflusst und der Inhalt hat keinen Einfluss auf die Vorgänger dieser Komponente.

Nachfolgende Elemente können insofern beeinflusst sein, dass der Inhalt der Komponente die Größe der Eltern-Komponente verändert und somit nachfolgende Elemente nach unten schiebt.

Bei einem modernen Website-Aufbau in Form von einzelnen, in sich abgeschlossenen Komponenten können die einzelnen Komponenten den Wert layout erhalten.

paint

Die Angabe des Werts paint kann grundsätzlich mit der CSS-Angabe overflow: hidden verglichen bzw. zu ihr ergänzt werden. Kind-Elemente, die außerhalb der Eltern-Komponente liegen, werden nicht angezeigt und müssen nicht vom Browser gerendert werden.

size

Hat eine Komponente die contain-Eigenschaft size, wird die Komponente gerendert, ohne deren Kind-Elemente zu berücksichtigen. Die Komponente wird somit behandelt als wäre sie leer.

Diese Option ist vor allem dann ratsam, wenn die Komponente feste Größenangaben hat, beispielsweise bei einem Werbebanner.

style *

Mit Hilfe von style können globale Einstellungen wie »Counter« und »Quotes« in einzelnen Komponenten isoliert werden, sodass ihre Angabe innerhalb der Komponente keinen Einfluss auf andere Elemente hat.

* zum Zeitpunkt der Veröffentlichung dieses Artikels, wird dieser Wert von Firefox nicht unterstützt. Grundsätzlich gibt es bei diesem Wert Unstimmigkeiten, da sein Einsatz sehr begrenzt ist und nicht wirklich Einfluss auf die Performance mit sich bringt.

Werte kombinieren und Kurzschreibweisen von contain

Die verschiedenen Werte können beliebig kombiniert werden. Somit können dem Browser mehrere wichtige Informationen mitgegeben werden, was er beachten muss und wo er Dinge ignorieren kann um die Elemente schneller zu rendern.

contain: layout paint size style;
contain: layout paint size;
contain: layout paint;
contain: layout size;

Für die Kombination layout paint size und layout paint gibt es eigene Werte, die hier als Kurzschreibweise gesehen werden können. Die Werte heißen strict und content.

contain: strict; // entspricht »layout paint size«
contain: content; // entspricht »layout paint«

Browser Support

Den exakten Browsersupport für die CSS-Eigenschaft contain entnehmt ihr bitte der Website caniuse.com

Links / Quellen

Geschrieben von Robert Menzel

Benutzerbild

Robert arbeitet als Frontend-Developer und Web-Designer bei kulturbanause®. Zu seinen Aufgaben gehören die Gestaltung und die technische Umsetzung von Websites mit Photoshop, Illustrator, WordPress, PHP, HTML, CSS (Sass) und JavaScript (jQuery). Besonders gerne übernimmt er die Erstellung individueller und anspruchsvoller WordPress-Themes mit umfangreichen ineinandergreifenden Funktionen.

Feedback & Ergänzungen – 2 Kommentare

  1. Jörg Barth (HH)
    schrieb am 08.03.2022 um 17:48 Uhr:

    Klasse, ich betreibe ein Blog welches sich mit Katzen beschäftigt. Hab‘ so 20/30 Besucher pro Tag, manchmal auch in der Woche. Ich setz mich gleich mal dran und ändere das CSS, damit die Inhalte noch schneller ausgeliefert werden können und niemand warten muß. Das könnte mich schließlich Besucher kosten.

    Von was reden wir hier eigentlich?

    Reden wir über die Performance meines Blogs oder über die Performance von „reddit“ oder „youtube“ oder über den Bastler, der im Keller seines Familienhauses in Bad Tölz einen eigenen Server hinter einer DSL Leitung betreibt? Ich bin sicher, meine hardware liefert pro Sekunde mehr Inhalte aus als es „reddit“ und Co. jemals könnten. Wen ich diese Performance weiter steigern will, dann denke ich über noch bessere Hardware nach, eine bessere „Leitung“ oder ich führe das „cachen“ ein oder sonstwas, aber nicht indem ich das css dope.

    Aktuell wird mein WordPress gesteuertes Blog gefühlt genauso schnell ausgeliefert wie das Blog von „fefe“. Reicht das nicht?

    Ich denke, der Author dieses Artikels hat nur vergessen etwas über die Einsatzszenarien dieses neuen CSS zu schreiben. Sorry, aber ich kann das mit dem „schneller schneller und noch schneller“ nicht mehr lesen. Vor 20 Jahren wäre das anders gewesen, aber nicht mehr im Heute mit der heute verfügbaren Hardware. Das ist einfach nur noch lächerlich!

    Jörg

    Antworten
    • Jonas Hellwig
      schrieb am 10.03.2022 um 19:39 Uhr:

      Hallo Jörg, vielen Dank für deinen Kommentar, aber warum so verärgert? Niemand zwingt dich entsprechende Anpassungen am CSS-Code vorzunehmen.

      CSS Contain dient in erster Linie der Optimierung von professionellen Websites mit klaren Marketing- und Wirtschafts-Zielen. Bei diesen Projekten darfst du davon ausgehen, dass bereits schnelle Server im Einsatz sind und Standards wie Caching ebenfalls umgesetzt sind.
      Doch auch wer kleine, private Projekte entwickelt, legt häufig Wert auf handwerklich erstklassig gebaute Websites und möchte eine positive Bewertung durch Lighthouse und Co. erhalten. Ein klar definiertes Einsatzszenario gibt es daher nicht.

      Die von dir geschilderten Beispiele (Bastler vs. YouTube) sind mir zu schwarz/weiß. Diese Website hier profitiert beispielsweise deutlich von Contain. Auch deine Einschätzung, dass mit schneller Hardware und guter Anbindung solche Techniken überflüssig sind, teile ich nicht. Das entspricht weder der Realität noch dem heute üblichen universellen Design-Ansatz.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →