Vlastnost contain v CSS: zapouzdřením k rychlejšímu vykreslení stránky

Vlastností contain označujeme části stránky, které jsou izolované od zbytku. Izolujeme je proto, aby prohlížeč nemusel při změnách překreslovat celou stránku. Ušetříme tím výkon na stránkách s komplexním DOMem.

Prohlížeče se už dlouho různými způsoby snaží nepřepočítávát vzhled celé stránky při každé změně samy.

Kromě toho existují kodérské triky, jak to udělat v běžném CSS (viz Layout Boundaries). No a relativně novou možností je použít pro tyhle účely vlastnost contain.

→ Celá problematika „CSS Containmentu“ je nejzajímavější ve vlastnosti content-visibility, ale silně se využívá také v Container Queries.

Dva příklady

Vlastnost contain může ušetřit čas potřebný pro vykreslování hlavně v případech, kdy DOM obsahuje tisíce uzlů. Následující příklady proto berte jako schématické a hodně zjednodušené.

Přidání prvku do DOMu

Tuhle ukázku jsem převzal z dokumentace od Googlu. Máme následující HTML:

<section class="view">
  Home
</section>

<section class="view">
  About
</section>

<section class="view">
  Contact
</section>

A teď JavaScriptem přidáme nový prvek:

<section class="view">
  Home
</section>

<section class="view">
  About
  <div class="newly-added-element">Check me out!</div>
</section>

<section class="view">
  Contact
</section>

Přidání nového prvku spouští rovnou tři kroky procesu překreslování – styl, layout a paint. Blbé ovšem je, že se ten proces spouští pro celý DOM a celou stránku. Může pak pomoci přidání vlastnosti contain.

Podívejme se ještě na jednu ukázku.

Výpis článků mimo viditelnou část obrazovky

Vezměme, že na stránce máme stovky či tisíce položek typu články, produkty nebo třeba tweety. Většinu z nich uživatelé neuvidí v prvním vykresleném viewportu. Zároveň jde o samostatné a izolované prvky, které se se zbytkem stránky nijak vzájemně neovlivňují.

Takhle může vypadat jejich výpis ve stránce:

<h1>Articles</h1>
<article> … </article>
<article> … </article>

Představme si, že prvků <article> jsou zde stovky a zároveň mají složitou vnitřní DOM strukturu.

Pomocí vlastnosti contain můžeme prohlížeč informovat, ať tyto prvky vyjme z celkového vykreslování stránky:

article {
  contain: content;
}

Prohlížeči tak dáváme instrukci, že prvky .element, které „nevidí“ ve viewportu může v klidu vynechat z počítání vzhledu celé stránky.

Ušetříme tím v některých situacích slušný renderovací čas.

Typy „containmentu“

Zatím se mi nepovedlo najít vhodné české slovíčko pro teorii, o které se ve specifikaci mluví jako o „CSS containmentu“. Jde o soběstačné a nezávislé zapouzdření prvku, což je ale poněkud kostrbaté označení.

Známe čtyři typy zapouzdření, které jsou zároveň možné hodnoty vlastnosti contain:

Hodnoty vlastnosti contain jde kombinovat, takže můžete například uvést contain: style paint.

Speciální hodnoty

Za účelem zjednodušení problematiky pro nás, autory webů, přichází specifikace se speciálními hodnotami vlastnosti contain: