Monitorujeme 1665 zdrojov

Vzhůru dolů 21.11.2022 16:17 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 .
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:
Home
About
Contact
A teď JavaScriptem přidáme nový prvek:
Home
About
Check me out!
Contact
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.
Ilustrační obrázek: Čas potřebný pro fázi layout můžeme snížit díky omezení na konkrétní boxík menšímu počtu prvku k přepočítání. Zdroj developers.google.com.
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:
Articles
…
…
Představme si, že prvků 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
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:
Hodnota contain
Typ zapouzdření
size
Zapouzdření pro velikost. Prohlížeči říkám, že velikost prvku nijak neovlivní jeho potomci. Pokud nastavíme contain:size, je potřeba v CSS také tomuto prvku nastavit nějakou velikost. Jinak prohlížeč počítá, že velikost je nulová, což nechceme. Zapouzdření velikosti samo o sobě zase tak moc výkonu při renderování neušetří.
inline-size
Zapouzdření pro „inline“ velikost. Totéž jako size jen pro změny velikosti na vodorovné ose.
layout
Zapouzdření pro rozvržení. Říkáme tím, že se layout potomků prvku a zbytku stránky nijak vzájemně neovlivňují. Díky tomu může při zápise contain:layout prohlížeč vynechat počítání layoutu vnitřních prvků elementu a zaměřit se jen na prvek, který tuto vlastnost má nastavenou.
paint
Zapouzdření pro vykreslení. Informujeme tímto, že žádný vnitřní prvek nevyčnívá ze svého rodiče. Uvedení contain:paint prohlížeči umožňuje potenciálně přeskočit vykreslení potomků, pokud je prvek mimo obrazovku.
style
Zapouzdření pro styly. Říkáme, že ovlivněný prvek vyjímáme z počítání hodnot napříč dokumentem, které provádějí vlastnosti jako counter-increment, counter-set nebo quotes.
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:
Hodnota contain
Typ zapouzdření
strict
Všechny typy zapouzdření, kromě stylů. Totéž jako zápis contain: size layout paint.
content
Všechny typy zapouzdření, kromě stylů a velikosti. Totéž jako contain: layout paint.
Hodnota strict ušetří prohlížeči více času, ale zase musíme znát a definovat velikost prvku.
Jak to použít v praxi? Pojďme se zde vrátit k druhé ukázce – renderování desítek či stovek článků mimo viditelnou část obrazovky:
Pokud bychom použili contain:content, nemusíme definovat výšku jednotlivých bloků. Na druhou stranu bude prohlížeč při prvním vykreslení považovat výšku za nulovou a nevykreslí například správně velká rolovátka.
Pokud bychom použili contain:strict, prohlížeči musíme výšku sdělit, ale zase nenastane přepočítání velikosti rolovátka.
Vlastnost contain vytváří nové kontexty
Pokud containment použijete s hodnotami paint, strict nebo content vytvoří se nové kontexty, které je možné dělat i jinými metodami v CSS:
Nový obsahující blok – pro potomky, jejichž vlastnost position je absolute nebo fixed, takže něco jako position:relative.
Nový kontext stohování , ve kterém můžete nezávisle na zbytku stránky umísťovat prvky do vrstev pomocí z-index.
Nový kontext formátování bloku , který například umí obsáhnout vnitřní prvky umístěné pomocí float nebo zakáže spojování vnějších okrajů .
Využít containment, konkrétně například contain:content, tedy můžete i v případě, že nechcete šetři výkon, ale usnadnit si kodérskou práci.
Podpora je plná
Vlastnost contain nepodporuje Internet Explorer, což vůbec nevadí. Všechny moderní prohlížeče v containmentu jedou s námi.
Viz také CanIUse.com
Odkazy
Pokud vás problematika containmentu zajímá více, zde je pár tipů k dalšímu studiu:
Vlastnost content-visibility, která z containmentu vychází.
MDN: CSS Containment, vlastnost contain.
Smashing Magazine: Helping Browsers Optimize With The CSS Contain Property
Za připomínky autor děkuje Michalovi Matuškovi.
Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
Top firmy
Nie sú nájdené žiadne články.
Nie sú nájdené žiadne články.