Obsahovat - Triky CSS

containVlastnost CSS označuje do prohlížeče, že prvek a jeho potomci jsou považovány za nezávislé na stromu dokumentů, stejně jako je to možné. To potenciálně poskytuje výhody výkonu s výpočty rozložení, stylu, barvy, velikosti nebo jakékoli kombinace pro omezenou oblast modelu DOM a ne pro celou stránku.

Vlastnost má pět standardních hodnot a dvě zkratkové hodnoty, které kombinují variace standardních hodnot. Každá hodnota má některé jedinečné a sdílené výhody v závislosti na kontextu prvku, který je používá.

Typickým použitím této vlastnosti je prvek, který obsahuje obsah nějakého typu. Zvažte widget, který vykresluje příchozí data, která mění rozložení a vizuály potomků prvku. Dalším prvkem, který je třeba vzít v úvahu, je ten, který obsahuje výsledky dat třetích stran, například bannerovou reklamu, kde nám výhody kontejnmentu umožňují buď upřednostnit malování určitého obsahu, jak zacházet s velikostí přijímaného obsahu, nebo určit, zda je obsah by měl být dokonce viditelný. Naproti tomu většinou statický web získá jen malou výhodu kromě prvního rozložení a vymalování obrazovky při načtení stránky.

Syntax

div ( contain: none | strict | content | ( size || layout || style || paint ); )

div ( contain: none; /* no containment on element */ contain: layout; /* influences how element relates to other elements in the document */ contain: paint; /* influences how element is painted to screen */ contain: size; /* influences how element affects size calculations for the page */ contain: style; /* is considered at-risk for removal from spec */ 
 contain: content; /* combines layout and paint */ contain: strict; /* combines layout, paint, and size */ )

Hodnoty vlastností

Rozložení

Hodnota layoutzadržení informuje prohlížeč, že žádný z potomků prvku nemá vliv na ostatní prvky na stránce, ani tyto ostatní prvky nemají žádný vliv na potomky obsaženého prvku. To umožňuje prohlížeči potenciálně snížit počet výpočtů nezbytných při vytváření rozložení stránky

Další výhodou je, že pokud je obsažený prvek mimo obrazovku nebo je nějakým způsobem zakryt, prohlížeč může zpozdit nebo přesunout související výpočty na nižší prioritu. Příkladem toho je obsažený prvek, který se nezobrazuje na konci blokového prvku a jeho začátek je viditelný.

Element s layoutkontejnmentem se stane boxem obsahujícím umístěné potomky - například elementy s absolutním umístěním. Prvek obdrží nový kontext skládání ve vztahu ke stránce a z-indelze použít vlastnost x. Směrové vlastnosti, jako například topnebo left, se však nepoužijí.

I když potomci obsaženého prvku nemusí ovlivňovat jiné prvky na stránce, mohou stále ovlivňovat svůj obsažený předchůdce. Potomek může například způsobit změnu velikosti obsaženého prvku v reakci na změny. V takovém případě může obsažený prvek stále potenciálně ovlivňovat další prvky na stránce, ale potomci se do těchto výpočtů stále nezapojí.

Následující ukázka poskytuje jednoduché vysvětlení toho, co se stane při použití layoutkontejnmentu. Po kliknutí na každé z horních polí se použije kontejnment a červené šipky změní vzhled. Vzhled červených šipek naznačuje, zda potomci pole ovlivňují během výpočtů rozvržení ostatní pole na stránce.

Malovat

Hodnota paintzadržení informuje prohlížeč, že žádný z potomků prvku nebude malován mimo rámeček prvku. Pokud je potomek umístěn tak, aby část jeho ohraničujícího rámečku byla oříznuta obsaženým prvkem, border-boxpak tato část nebude malována. Pokud je potomek elementu umístěn zcela mimo obsažený element, border-boxpak není vůbec malován. Je to podobné jako overflow: hidden;u prvku, ale bez výhod přeskočení nebo snížení potřebných výpočtů.

Další výhodou je, že pokud obsažený prvek není ve výřezu nějakým způsobem viditelný, může při provádění malířských výpočtů přeskočit jeho potomky. Příkladem je prvek, který je umístěn mimo stránku nalevo od výřezu. Pokud obsažený prvek není viditelný, je to záruka, že jeho obsah nebude viditelný. Proto se od nich nevyžaduje, aby se účastnili výpočtů barev.

Element s paintkontejnmentem se také stane boxem obsahujícím umístěné potomky - například elementy s absolutním umístěním. Prvek také obdrží nový kontext skládání ve vztahu ke stránce a z-indexvlastnost lze použít. Směrové vlastnosti, jako například topnebo left, se však nepoužijí.

Rolovací prvek může získat další výhody tím, že jeho potomci budou umístěni do nové vrstvy barvy, která může pomoci s rolovacím výkonem. Normálně mohou rolovací prvky způsobit neustálé překreslování, jak se potomci během rolování objevují a mizí. Rolovací prvek s zadržováním barvy může potenciálně přeskočit toto konstantní překreslování rolování potomků.

Následující ukázka poskytuje jednoduché vysvětlení toho, co se stane při použití paintkontejnmentu. Kliknutím kamkoli přepnete kontejnment na fialovém poli. Když je použito zadržení, některé ze zelených rámečků se změní ve vzhledu. Vzhled zelených rámečků ukazuje, jak jsou nebo nejsou vybarveny.

Velikost

Hodnota sizezadržení informuje prohlížeč, že při provádění výpočtů rozložení stránky není třeba brát v úvahu žádného z potomků. Obsažený prvek musí mít heighta widthpoužity vlastnosti, jinak se sbalí na čtverec nulových pixelů. Pro výpočty rozložení stránky je třeba vzít v úvahu pouze samotný prvek, protože potomci nemohou ovlivnit velikost prvku. Potomci obsaženého prvku jsou v takových výpočtech zcela přeskočeni; jako by vůbec neměl potomky.

Pro plné využití optimalizace se sizekontejnment obvykle používá u jiných typů kontejnmentu.

Prvek s sizekontejnmentem obdrží nový kontext skládání ve vztahu ke stránce a z-indexlze použít vlastnost. Směrové vlastnosti, jako například topnebo left, se však nepoužijí.

Následující ukázka poskytuje jednoduché vysvětlení toho, co se stane při použití sizekontejnmentu. Kliknutím kamkoli přepnete kontejnment na fialovém poli. Když je kontejnment použit, velikost fialového rámečku se změní. Ve výchozím nastavení je výška fialového pole definována jeho podřízenými prvky, ale s omezením musí být definována výška. Jakmile je kontejnment použit, potomci už nejsou zapojeni do výpočtů rozložení souvisejících s velikostí.

Styl

Hodnota stylezadržení informuje prohlížeč, že některé vlastnosti CSS, jako jsou čítače a uvozovky, budou vymezeny na obsažený prvek.

Vlastnosti counter-incrementa counter-setmusí být vymezeny na podřízený strom obsaženého prvku. Pokud se rozšíří mimo obsažený prvek, vytvoří se nový čítač.

Hodnoty vlastnosti content se k open-quote, close-quote, no-open-quotea no-close-quotemusí být rozsahem uzavřeném prvku dílčího stromu.

Tato hodnota omezení je považována za rizikovou z toho, že bude odstraněna ze specifikace.

Obsah

Hodnota contentzadržení je kombinací hodnot rozložení a zadržení barvy. Toto je ekvivalent použití kontejnmentu tímto způsobem:

div ( contain: layout paint; )

Všechny potenciální výhody popsané výše pro každou hodnotu by pak byly k dispozici obsaženému prvku. Toto omezení by bylo považováno za relativně bezpečné pro široké použití na více prvcích na stránce.

Přísný

strictHodnota obálka je kombinací layout, painta sizehodnoty pro uzavření. Toto je ekvivalent použití kontejnmentu tímto způsobem:

div ( contain: layout paint size; )

Všechny potenciální výhody popsané výše pro každou hodnotu by pak byly k dispozici obsaženému prvku.

Jako „nejpřísnější“ z hodnot zadržení by měla být tato hodnota použita s pečlivým zvážením. To je způsobeno požadavky na rozměry, které ukládá na obsažený prvek. S těmito požadavky tato hodnota kontejnmentu nabízí nejpotenciálnější výkonnostní výhody kontejnmentu.

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome	Firefox	TJ	Okraj	Safari
52	69	Ne	79	Ne

Mobilní / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Ne