Obsahovať - Triky CSS

containVlastnosť CSS označuje do prehliadača, že prvok a jeho potomkovia sú považované za nezávislé od stromu dokumentov, rovnako ako je to možné. To potenciálne poskytuje výhody výkonu s výpočtami rozloženia, štýlu, farby, veľkosti alebo akejkoľvek kombinácie pre obmedzenú oblasť modelu DOM a nie pre celú stránku.

Vlastnosť má päť štandardných hodnôt a dve skratkové hodnoty, ktoré kombinujú variácie štandardných hodnôt. Každá hodnota má niektoré jedinečné a zdieľané výhody v závislosti od kontextu prvku, ktorý ich uplatňuje.

Typickým použitím tejto vlastnosti je prvok, ktorý obsahuje obsah nejakého typu. Zvážte miniaplikáciu, ktorá vykresľuje prichádzajúce údaje, ktoré menia rozloženie a vizuály potomkov prvku. Ďalším prvkom, ktorý je potrebné vziať do úvahy, je ten, ktorý obsahuje výsledky údajov tretích strán, ako je napríklad bannerová reklama, kde výhody obmedzenia umožňujú buď zrušiť prioritu maľovania určitého obsahu, ako zvládnuť veľkosť prijatého obsahu, alebo určiť, či je obsah vhodný. by mali byť dokonca viditeľné. Na druhej strane väčšinou statické stránky získajú okrem prvého rozloženia a vymaľovania obrazovky pri načítaní stránky iba malú výhodu.

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 nehnuteľností

Rozloženie

Hodnota layoutzadržania informuje prehliadač, že žiadny z potomkov prvku nemá vplyv na iné prvky na stránke, ani tieto ďalšie prvky nemajú žiadny vplyv na potomkov obsiahnutého prvku. Toto umožňuje prehliadaču potenciálne znížiť počet výpočtov potrebných pri vytváraní rozloženia stránky

Ďalšou výhodou je, že ak je obsiahnutý prvok mimo obrazovku alebo je nejakým spôsobom zakrytý, potom môže prehliadač oneskoriť alebo presunúť súvisiace výpočty na nižšiu prioritu. Príkladom toho je obsiahnutý prvok, ktorý sa nezobrazuje na konci blokového prvku a jeho začiatok je viditeľný.

Z prvku s layoutobmedzením sa stane pole, ktoré obsahuje pre potomkov umiestnených - napríklad prvky s absolútnym umiestnením. Element dostane nový kontext stohovania vo vzťahu k stránke a z-indemožno použiť vlastnosť x. Smerové vlastnosti, ako napríklad topalebo left, sa však neuplatňujú.

Aj keď potomkovia obsiahnutého prvku nemusia ovplyvňovať iné prvky na stránke, stále môžu ovplyvňovať svoj obsiahnutý prvok predka. Potomok môže napríklad spôsobiť zmenu veľkosti obsiahnutého prvku v reakcii na zmeny. V takom prípade môže obsiahnutý prvok ešte potenciálne ovplyvniť ďalšie prvky na stránke, ale potomkovia sa do týchto výpočtov stále nezapoja.

Nasledujúca ukážka poskytuje jednoduché vysvetlenie toho, čo sa stane, keď sa použije layoutobmedzenie. Po kliknutí na každé z horných polí sa použije obmedzenie a červené šípky zmenia vzhľad. Vzhľad červených šípok naznačuje, či potomkovia poľa ovplyvňujú počas výpočtov rozloženia ostatné polia na stránke.

Maľovať

Hodnota paintzadržania informuje prehliadač, že žiadny z potomkov prvku nebude maľovaný mimo rámčeka prvku. Ak je potomkový prvok umiestnený tak, aby časť jeho ohraničovacieho poľa bola orezaná o obsiahnutý prvok, border-boxpotom táto časť nebude zafarbená. Ak je potomsky prvok umiestnený úplne mimo obsiahnutý prvok, border-boxpotom nie je vymaľovaný vôbec. Je to podobné ako overflow: hidden;v prípade prvku, ale bez výhod preskočenia alebo zníženia potrebných výpočtov.

Ďalšou výhodou je, že ak obsiahnutý prvok nie je nejakým spôsobom viditeľný vo výreze, potom môže pri vykonávaní maliarskych výpočtov preskočiť jeho potomkov. Príkladom toho je prvok, ktorý je umiestnený mimo stránku vľavo od výrezu. Ak obsiahnutý prvok nie je viditeľný, potom je to záruka, že jeho obsah nebude viditeľný. Preto sa od nich nevyžaduje, aby sa podieľali na výpočtoch farieb.

Z prvku s paintobmedzením sa tiež stane obsahujúci box pre umiestnených potomkov - napríklad prvky s absolútnym umiestnením. Element tiež získa nový kontext stohovania vo vzťahu k stránke a z-indexvlastnosť môže byť použitá. Smerové vlastnosti, ako napríklad topalebo left, sa však neuplatňujú.

Posúvací prvok môže získať ďalšie výhody tým, že jeho potomkovia budú umiestnení do novej vrstvy farby, ktorá môže pomôcť pri posúvaní. Za normálnych okolností môžu posúvacie prvky spôsobiť neustále premaľovanie, keď sa potomkovia počas posúvania objavujú a miznú. Rolovací prvok s obalom farby môže potenciálne preskočiť toto neustále prefarbovanie rolovajúcich potomkov.

Nasledujúca ukážka poskytuje jednoduché vysvetlenie toho, čo sa stane, keď sa použije paintobmedzenie. Kliknutím kamkoľvek prepnete izoláciu vo fialovom poli. Keď sa použije izolácia, niektoré zo zelených políčok sa zmenia vo vzhľade. Vzhľad zelených políčok ukazuje, ako sú alebo nie sú maľované.

Veľkosť

Hodnota sizezadržania informuje prehliadač, že pri výpočtoch rozloženia pre stránku nie je potrebné brať do úvahy žiadneho z potomkov. Obsiahnutý prvok musí mať heighta widthpoužité vlastnosti, inak sa zbalí na štvorcový štvorcový pixel. Pri výpočtoch rozloženia stránky je potrebné brať do úvahy iba samotný prvok, pretože potomkovia nemôžu ovplyvniť veľkosť prvku. Potomkovia obsiahnutého prvku sú v takýchto výpočtoch úplne preskočení; akoby vôbec nemal potomkov.

Kvôli úplným výhodám optimalizácie sa sizeobmedzenie zvyčajne používa s inými typmi zadržania.

Element s sizeobmedzením dostane nový kontext stohovania vo vzťahu k stránke a z-indexvlastnosť môže byť použitá. Smerové vlastnosti, ako napríklad topalebo left, sa však neuplatňujú.

Nasledujúca ukážka poskytuje jednoduché vysvetlenie toho, čo sa stane, keď sizesa použije obmedzenie. Kliknutím kamkoľvek prepnete izoláciu vo fialovom poli. Po použití zadržania sa veľkosť fialového poľa zmení. V predvolenom nastavení je výška fialového poľa definovaná jeho potomkami, musí však byť definovaná výška. Keď sa použije obmedzenie, potomkovia sa už nebudú podieľať na výpočtoch rozloženia súvisiaceho s veľkosťou.

Štýl

Hodnota stylezadržania informuje prehliadač, že niektoré vlastnosti CSS, ako napríklad počítadlá a úvodzovky, budú mať rozsah pre obsiahnutý prvok.

Vlastnosti counter-incrementa counter-setmusia byť zamerané na podstrom obsiahnutého prvku. Ak sa rozšíri mimo obsiahnutý prvok, vytvorí sa nové počítadlo.

Hodnoty vlastnosti content sa k open-quote, close-quote, no-open-quotea no-close-quotemusí byť rozsahom uzavretom prvku čiastkového stromu.

Táto hodnota obmedzenia sa považuje za rizikovú z dôvodu, že bude odstránená zo špecifikácie.

Obsah

Hodnota contentzadržania je kombináciou oboch hodnôt rozloženia a zadržania farby. Toto je ekvivalent použitia zadržania týmto spôsobom:

div ( contain: layout paint; )

Pre obsiahnutý prvok by potom boli k dispozícii všetky potenciálne výhody opísané vyššie pre každú hodnotu. Toto obmedzenie by sa považovalo za relatívne bezpečné pri širokom použití na viac prvkov na stránke.

Prísne

strictHodnota obálka je kombináciou layout, painta sizehodnoty pre uzavretie. Toto je ekvivalent použitia zadržania týmto spôsobom:

div ( contain: layout paint size; )

Pre obsiahnutý prvok by potom boli k dispozícii všetky potenciálne výhody opísané vyššie pre každú hodnotu.

Ako „najprísnejšia“ z hodnôt zadržania by sa táto hodnota mala používať s opatrným zvážením. Je to z dôvodu rozmerových požiadaviek, ktoré kladie na obsiahnutý prvok. S týmito požiadavkami táto hodnota obmedzenia ponúka najpotenciálnejšie výkonové výhody obmedzenia.

Podpora prehliadača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome	Firefox	IE	Hrana	Safari
52	69	Nie	79	Nie

Mobil / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Nie