containCSS nuosavybė rodo į naršyklę, kad elementas ir jo palikuonys laikomi nepriklausomi dokumento medžio, kiek įmanoma. Tai gali būti naudinga naudojant skaičiavimus dėl išdėstymo, stiliaus, dažų, dydžio ar bet kokio derinio ribotoje DOM srityje, o ne visame puslapyje.
Nuosavybėje yra penkios standartinės vertės ir dvi stenografinės vertės, kurios sujungia standartinių verčių variantus. Kiekviena vertė turi keletą unikalių ir bendrų privalumų, atsižvelgiant į jas taikančio elemento kontekstą.
Tipiškas šios savybės naudojimas yra elementas, kuriame yra tam tikro tipo turinys. Apsvarstykite valdiklį, kuris pateikia gaunamus duomenis, pakeičiančius elemento palikuonių išdėstymą ir vaizdą. Kitas elementas, į kurį reikia atsižvelgti, yra tas, kuriame pateikiami trečiųjų šalių duomenų, pvz., Reklamjuostės skelbimo, rezultatai, kai sulaikymo pranašumai leidžia mums arba atsisakyti prioriteto tam tikro turinio dažymui, kaip tvarkyti gaunamo turinio dydį, arba nustatyti, ar turinys netgi turėtų būti matomas. Kita vertus, daugiausia statiška svetainė gaus tik nedidelę naudą, išskyrus pirmąjį išdėstymą ir dažymą ekrane, kai bus įkeltas puslapis.
Sintaksė
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 */ )Nuosavybės vertės
Išdėstymas
layoutIzoliavimo vertė informuoja naršyklę, kad nė vienas iš elementas palikuonių paveikti kitus elementus puslapyje, nei padaryti tie kiti elementai turi kokį nors poveikį iš riboto elementas palikuonių. Tai leidžia naršyklei sumažinti skaičiavimų, reikalingų kuriant puslapio maketą, skaičių
Kitas pranašumas yra tas, kad jei esamas elementas yra ne ekrane arba kažkaip uždengtas, tada naršyklė gali atidėti arba perkelti susijusius skaičiavimus į mažesnį prioritetą. To pavyzdys yra sudėtinis elementas, kurio nematyti bloko elemento gale, ir to bloko elemento pradžia yra matoma.
Elementas su layoutizoliacija tampa talpinamų palikuonių langeliu, pavyzdžiui, su absoliučiu pozicionavimu. Elementas gauna naują kaupimo kontekstą puslapio atžvilgiu ir z-indegalima naudoti ypatybę x. Nors krypties savybės, tokios kaip toparba left, netaikomos.
Nors turimo elemento palikuonys gali neturėti įtakos kitiems puslapio elementams, jie vis tiek gali turėti įtakos jų turimam protėvio elementui. Pavyzdžiui, palikuonis gali sukelti esančio elemento dydį, reaguodamas į pokyčius. Tokiu atveju esamas elementas vis tiek gali daryti įtaką kitiems puslapio elementams, tačiau palikuonys vis tiek nebus įtraukti į tuos skaičiavimus.
Šioje demonstracijoje pateikiamas paprastas paaiškinimas, kas nutinka layoutpritaikius izoliavimą. Spustelėjus kiekvieną viršutinį langelį, pritaikoma izoliacija ir raudonos rodyklės pakeis išvaizdą. Raudonų rodyklių išvaizda rodo, ar langelio palikuonys turi įtakos kitiems puslapio langeliams atliekant maketo skaičiavimus.
Tapyti
paintIzoliavimo vertė informuoja naršyklę, kad nė vienas iš elemento palikuonių bus dažytos Už sienos-box elemento. Jei palikuonių elementas yra taip, kad jo ribojančios dėžės dalis būtų apkarpyta esančio elemento, border-boxši dalis nebūtų dažoma. Jei palikuonių elementas yra visiškai už elemento ribų, border-boxjis visiškai nedažomas. Tai panašu į overflow: hidden;elemento taikymą, tačiau be privalumų praleidžiant ar sumažinant reikiamus skaičiavimus.
Kitas pranašumas yra tas, kad jei esantis elementas kažkaip nematomas peržiūros srityje, atlikdamas dažymo skaičiavimus, jis gali praleisti elemento palikuonis. To pavyzdys yra elementas, išdėstytas ne puslapyje, esančiame peržiūros srities kairėje. Jei esamo elemento nematyti, tai garantuoja, kad jo turinys nebus matomas. Todėl nereikalaujama, kad jie dalyvautų skaičiuojant dažus.
Elementas su paintizoliacija taip pat tampa dėžučių padėtimi palikuonims, pavyzdžiui, elementai su absoliučia padėtimi. Elementas taip pat gauna naują puslapio kaupimo kontekstą ir z-indexgalima naudoti ypatybę. Nors krypties savybės, tokios kaip toparba left, netaikomos.
Slinkimo elementas gali gauti papildomos naudos, jei jo palikuonys bus įdėti į naują dažų sluoksnį, kuris gali padėti slinkti. Paprastai slinkimo elementai gali nuolat perdažyti, nes slinkdami palikuonys atsiranda ir dingsta. Slenkantis elementas su dažų izoliacija gali praleisti šį nuolatinį slenkančių palikuonių perdažymą.
Šioje demonstracijoje pateikiamas paprastas paaiškinimas, kas nutinka paintpritaikius izoliavimą. Spustelėkite bet kurią vietą, jei norite perjungti purpurinę dėžutę. Pritaikius izoliaciją, kai kurių žaliųjų dėžučių išvaizda pasikeičia. Žaliųjų dėžučių išvaizda rodo, kaip jie dažomi ar nedažomi.
Dydis
sizeIzoliavimo vertė informuoja naršyklę, kad nė vienas iš palikuonių reikia atsižvelgti atliekant maketavimo skaičiavimus puslapyje. Turi būti elementas, kuriame yra elementas, heightir widthpritaikytos savybės, kitaip jis sutaps iki nulio taškų kvadrato. Skaičiuojant puslapio maketą reikia atsižvelgti tik į patį elementą, nes palikuonys negali turėti įtakos elemento dydžiui. Atliekant tokius skaičiavimus, elemento palikuonys yra visiškai praleisti; tarsi visai neturėtų palikuonių.
Siekiant visapusiško optimizavimo pranašumų, sizeizoliacija paprastai taikoma su kitais tipais.
Elementas su sizeizoliacija gauna naują kaupimo kontekstą, susijusį su puslapiu, ir z-indexypatybę galima naudoti. Nors krypties savybės, tokios kaip toparba left, netaikomos.
Šioje demonstracijoje pateikiamas paprastas paaiškinimas, kas nutinka, kai sizetaikoma izoliacija. Spustelėkite bet kurią vietą, jei norite perjungti purpurinę dėžutę. Pritaikius izoliaciją, purpurinės spalvos langelio dydis pasikeičia. Pagal numatytuosius nustatymus violetinės dėžės aukštį nustato jos vaikai, tačiau su izoliacija turi būti nustatytas aukštis. Pritaikius izoliaciją, palikuonys nebedalyvauja skaičiuojant su dydžiu susijusį išdėstymą.
Stilius
styleIzoliavimo vertė informuoja naršyklę, kad kai kurie CSS savybės, kaip antai skaitiklių ir citatos bus scoped į riboto elementas.
counter-incrementIr counter-setsavybės turi būti scoped į riboto elemento sub-medžio. Jei išplėstas už elemento ribų, sukuriamas naujas skaitiklis.
Turinys turto vertės open-quote, close-quote, no-open-quote, ir no-close-quoteturi būti scoped į riboto elemento sub-medžio.
Manoma, kad ši izoliacijos vertė gali būti pašalinta iš specifikacijos.
Turinys
contentIzoliavimo vertė yra abiejų išdėstymą ir dažų sulaikymo vertybių derinys. Tai prilygsta izoliavimo taikymui tokiu būdu:
div ( contain: layout paint; )Tuomet esamas elementas galės naudotis visomis pirmiau aprašytomis galimomis naudomis kiekvienai vertei. Ši izoliacija būtų laikoma gana saugia plačiai pritaikyti keliems puslapio elementams.
Griežtas
strictIzoliavimo vertė yra iš derinys layout, paintir sizeizoliavimo verčių. Tai prilygsta izoliavimo taikymui tokiu būdu:
div ( contain: layout paint size; )Tuomet esamas elementas galės naudotis visomis pirmiau aprašytomis galimomis naudomis kiekvienai vertei.
Ši vertė yra „griežčiausia“ iš ribojimo verčių, todėl ją reikia naudoti gerai apgalvojus. Taip yra dėl matmenų reikalavimų, kuriuos jis nustato esančiam elementui. Laikantis šių reikalavimų, ši izoliacijos vertė teikia didžiausią potencialų izoliacijos efektyvumo pranašumą.
Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 52 | 69 | Ne | 79 | Ne |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 81 | Ne |