Sisaldama - CSS-trikid

containCSS-is olev atribuut näitab brauserile, et elementi ja selle järglasi peetakse võimalikult sõltumatuks dokumendipuust. See võib potentsiaalselt tuua toimivuse eeliseid, kui arvutate paigutust, stiili, värvi, suurust või mis tahes kombinatsiooni DOM-i piiratud alal ja mitte kogu lehel.

Atribuudil on viis standardväärtust ja kaks lühikest väärtust, mis ühendavad standardväärtuste variatsioonid. Igal väärtusel on mõned ainulaadsed ja jagatud eelised, sõltuvalt neid rakendava elemendi kontekstist.

Selle omaduse tüüpiline kasutus on element, mis sisaldab mingit tüüpi sisu. Mõelgem vidinale, mis renderdab sissetulevad andmed, mis muudab elemendi järeltulijate paigutust ja visuaali. Teine element, mida tuleks kaaluda, on see, mis sisaldab kolmandate osapoolte andmete tulemusi, näiteks ribareklaami, kus isoleerimise eelised võimaldavad meil kas prioriteerida teatud sisu maalimist, kuidas käituda vastuvõetud sisu suurusega või otsustada, kas sisu peaks isegi nähtav olema. Seevastu peamiselt staatiline sait saab peale esimese paigutuse ja lehe laadimisel ekraanile värvimise vähe kasu.

Süntaks

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 */ )

Atribuudi väärtused

Paigutus

layoutOhjeldamine väärtus teatab brauser, et ükski element järeltulijad mõjutada teisi elemente lehel ega neid muid elemente mingit mõju järeltulijate sisalduv element. See võimaldab brauseril vähendada lehe paigutuse loomisel vajalike arvutuste arvu

Teine eelis on see, et kui sisalduv element on ekraaniväline või mingil viisil varjatud, võib brauser viivitada või viia seotud arvutused madalama prioriteediga. Selle näiteks on suletud element, mida plokielemendi lõpus pole näha ja selle plokielemendi algus on nähtav.

Piiratud elemendist layoutsaab positsioneeritud järeltulijate jaoks kast, näiteks absoluutse positsioneerimisega elemendid. Element saab lehe suhtes uue virnastamise konteksti ja z-indesaab kasutada atribuuti x. Kuigi suunaomadused, näiteks topvõi left, ei kehti.

Kuigi suletud elemendi järeltulijad ei pruugi lehe teisi elemente mõjutada, saavad nad siiski mõjutada nende sisalduvat esivanemat. Näiteks võib järeltulija põhjustada reageerimisel muutustele sisestatud elemendi suuruse. Sel juhul võib sisalduv element siiski mõjutada lehe teisi elemente, kuid järeltulijaid ei kaasata ikkagi nendesse arvutustesse.

Järgmine demo annab lihtsa selgituse selle kohta, mis juhtub, kui layoutisoleeritakse. Kõigil ülemistel kastidel klõpsates rakendatakse tõkestus ja punased nooled muudavad välimust. Punaste noolte välimus viitab sellele, kas kasti järeltulijad mõjutavad paigutuse arvutuste ajal lehe teisi kaste.

Värv

paintOhjeldamine väärtus teatab brauser et ükski järeltulijad element on värvitud väljaspool piiri-box elemendi. Kui järglaselement on paigutatud nii, et osa selle piirikarbist oleks kinnise elemendi poolt klammerdatav, border-boxsiis seda osa ei värvita. Kui järeltulija element paikneb täielikult väljaspool sisalduvat elementi, border-boxsiis ei värvita seda üldse. See sarnaneb overflow: hidden;elemendi rakendamisega, kuid ilma vajalike arvutuste vahelejätmise või vähendamise eelisteta.

Teine eelis on see, et kui sisalduv element pole vaateaknas mingil viisil nähtav, võib see värvimisarvutuste tegemisel elemendi järeltulijad vahele jätta. Selle näide on element, mis paigutatakse vaateakna vasakule lehele. Kui sisalduv element pole nähtav, on see garantii, et selle sisu ei ole nähtav. Seetõttu ei pea nad värviarvutustes osalema.

Element koos painteraldusega muutub ka positsioneeritud järeltulijate jaoks kastiks - näiteks absoluutse positsioneerimisega elementideks. Samuti saab element lehe suhtes uue virnastamise konteksti ja z-indexatribuuti saab kasutada. Kuigi suunaomadused, näiteks topvõi left, ei kehti.

Keritav element võib saada täiendavaid eeliseid, kui tema järeltulijad paigutatakse uude värvikihti, mis võib aidata kerimist. Tavaliselt võivad kerimiselemendid põhjustada pidevaid ülevärve, kuna järeltulijad kerimise ajal ilmuvad ja kaovad. Värvi sisaldusega keritav element võib selle kerivate järeltulijate pideva ülevärvimise vahele jätta.

Järgmine demo annab lihtsa selgituse selle kohta, mis juhtub, kui paintisoleeritakse. Violetises kastis oleva isoleerimise vahetamiseks klõpsake suvalisel kohal. Tõkestamise rakendamisel muutuvad mõned rohelised kastid välimusega. Roheliste kastide välimus näitab, kuidas neid värvitakse või mitte.

Suurus

sizeOhjeldamine väärtus teatab brauser et ükski järeltulijad tuleb arvestada, kui tehakse paigutus arvutused lehel. Sisestatud elemendil peavad olema omadused heightja widthrakendatud, vastasel juhul kukub see nullpikslist ruutu. Lehekülje paigutuse arvutamisel tuleb arvesse võtta ainult elementi ennast, kuna järeltulijad ei saa elemendi suurust mõjutada. Sisaldatava elemendi järeltulijad jäetakse sellistes arvutustes täielikult vahele; nagu poleks tal üldse järglasi.

Optimeerimise täielike eeliste saavutamiseks rakendatakse sizeisoleerimist tavaliselt muude isoleerimistüüpidega.

Element koos sizeisoleerimisega saab lehe suhtes uue virnastamise konteksti ja z-indexatribuuti saab kasutada. Kuigi suunaomadused, näiteks topvõi left, ei kehti.

Järgmine demo annab lihtsa selgituse selle kohta, mis juhtub sizeisoleerimise rakendamisel. Violetises kastis oleva isoleerimise vahetamiseks klõpsake suvalisel kohal. Rihma rakendamisel muutub lilla kasti suurus. Lillakasti kõrguse määravad vaikimisi selle lapsed, kuid koos piiramisega tuleb kõrgus määrata. Kui isoleerimine on rakendatud, ei osale järeltulijad enam suurusega seotud kujunduse arvutamisel.

Stiil

styleOhjeldamine väärtus teatab brauser et mõned CSS omadused, nagu loendurid ja hinnapakkumisi, siis scoped sisalduvale element.

counter-incrementJa counter-setomadused tuleb scoped sisalduvale elemendi sub-tree. Kui laiendada väljaspool sisalduvat elementi, luuakse uus loendur.

Sisu vara väärtuse open-quote, close-quote, no-open-quote, ja no-close-quotetuleb scoped sisalduvale elemendi sub-tree.

Seda isoleeritud väärtust peetakse spetsifikatsioonist eemaldamise riskiks.

Sisu

contentOhjeldamine väärtus on kombinatsioon nii paigutuse ja värvi ohjeldamine väärtusi. See on samaväärne isoleerimise rakendamisega sel viisil:

div ( contain: layout paint; )

Kõik ülalkirjeldatud potentsiaalsed eelised iga väärtuse jaoks oleksid siis saadaval sisalduvale elemendile. Seda isoleerimist peetakse suhteliselt ohutuks, kui seda lehe mitme elemendi jaoks laialdaselt rakendada.

Ranged

strictOhjeldamine väärtus ei kombinatsioonina layout, paintning sizeohjeldamine väärtusi. See on samaväärne isoleerimise rakendamisega sel viisil:

div ( contain: layout paint size; )

Kõik ülalkirjeldatud potentsiaalsed eelised iga väärtuse jaoks oleksid siis saadaval sisalduvale elemendile.

Kuna isoleeritud väärtused on kõige rangemad, tuleks seda väärtust kasutada hoolikalt kaaludes. Selle põhjuseks on mõõtenõuded, mille see rakendab sisestatud elemendile. Nende nõuete kohaselt pakub see ohjeldamisväärtus tõkestamise kõige potentsiaalsemaid eeliseid.

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

Chrome	Firefox	IE	Edge	Safari
52	69	Ei	79	Ei

Mobiil / tahvelarvuti

Android Chrome	Android Firefox	Android	iOS-i Safari
88	85	81	Ei