Den containeiendom i CSS viser til nettleseren at elementet og dens etterkommere anses uavhengig av dokumentet treet så mye som mulig. Dette gir potensielt ytelsesfordeler med beregninger i layout, stil, maling, størrelse eller hvilken som helst kombinasjon for et begrenset område av DOM og ikke for hele siden.
Eiendommen har fem standardverdier og to stenografiske verdier som kombinerer variasjoner av standardverdiene. Hver verdi har noen unike og delte fordeler, avhengig av konteksten til elementet som bruker dem.
Den typiske bruken av denne egenskapen er et element som inneholder innhold av en eller annen type. Tenk på en widget som gjengir innkommende data som endrer utformingen og grafikken til elementets etterkommere. Et annet element å vurdere er et som inneholder resultatene av tredjepartsdata, for eksempel en bannerannonse, der fordelene med inneslutning lar oss enten prioritere å male bestemt innhold, hvordan vi skal håndtere størrelsen på innholdet som mottas, eller avgjøre om innholdet skal til og med være synlig. Et stort sett statisk nettsted vil derimot få liten fordel utover det første oppsettet og maling til skjermen ved sideinnlasting.
Syntaks
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 */ )Eiendomsverdier
Oppsett
Den layoutcontainment verdi informerer leseren at ingen av elementets etterkommere påvirke andre elementer på siden, og heller ikke de andre elementene har noen effekt på etterkommere av inne element. Dette gjør at nettleseren potensielt kan redusere antall beregninger som er nødvendige når du oppretter sideoppsettet
En annen fordel er at hvis det inneholdte elementet er utenfor skjermen eller skjult på en eller annen måte, kan nettleseren forsinke eller flytte relaterte beregninger til lavere prioritet. Et eksempel på dette er et inneholdt element som ikke er synlig på slutten av et blokkelement, og begynnelsen på det blokkelementet er synlig.
Et element med layoutinneslutning blir en inneholdende rute for posisjonerte etterkommere - for eksempel elementer med absolutt posisjonering. Elementet mottar en ny stablingskontekst i forhold til siden og z-indeegenskapen x kan brukes. Selv om retningsegenskaper, som topeller left, ikke gjelder.
Selv om etterkommerne av det inneholdte elementet ikke kan påvirke andre elementer på siden, kan de fremdeles påvirke deres inneholdte forfedreelement. For eksempel kan en etterkommer føre til at det inneholdte elementet endres i størrelse som reaksjon på endringer. I så fall kan det inneholdte elementet fremdeles potensielt påvirke andre elementer på siden, men etterkommerne vil fortsatt ikke være involvert i disse beregningene.
Følgende demo gir en enkel forklaring på hva som skjer når layoutinneslutningen brukes. Når du klikker på hver av de øverste boksene, blir inneslutningen brukt, og de røde pilene vil endre utseende. Utseendet til de røde pilene antyder om etterkommere av boksen påvirker de andre boksene på siden under beregning av layout.
Maling
Den paintcontainment verdi informerer leseren at ingen av etterkommerne av elementet vil bli malt utenfor grensen-box av elementet. Hvis et etterkommende element er posisjonert for å ha en del av avgrensningsboksen som skal klippes av det inneholdte elementet, border-boxskal ikke den delen males. Hvis et etterkommende element er plassert helt utenfor det inneholdte elementet, er border-boxdet ikke malt i det hele tatt. Dette ligner på å gjelde overflow: hidden;for elementet, men uten fordelene ved å hoppe over eller redusere nødvendige beregninger.
En annen fordel er at hvis det inneholdte elementet ikke er synlig på en eller annen måte i visningsområdet, kan det hoppe over etterkommerne av elementet når du utfører maleberegninger. Et eksempel på dette er et element som er plassert utenfor siden til venstre for visningsområdet. Hvis det inneholdte elementet ikke er synlig, er det en garanti for at innholdet ikke blir synlig. Derfor er de ikke pålagt å være involvert i malingberegninger.
Et element med paintinneslutningen blir også en inneholdende boks for posisjonerte etterkommere - for eksempel elementer med absolutt posisjonering. Elementet får også en ny stablingskontekst i forhold til siden, og z-indexegenskapen kan brukes. Selv om retningsegenskaper, som topeller left, ikke gjelder.
Et rulleelement kan få ekstra fordeler ved å få etterkommerne plassert i et nytt malingslag som kan hjelpe deg med å rulle. Normalt kan rulleelementer forårsake konstant maling på nytt når etterkommerne vises og forsvinner under rulle. Et rulleelement med malingsinneslutningen kan potensielt hoppe over denne konstante malingen av rullende etterkommere.
Følgende demo gir en enkel forklaring på hva som skjer når paintinneslutningen brukes. Klikk hvor som helst for å veksle inneslutningen i den lilla boksen. Når inneslutning påføres, endres noen av de grønne boksene i utseende. Utseendet til de grønne boksene viser hvordan de er malt eller ikke malt.
Størrelse
Den sizecontainment verdi informerer leseren at ingen av etterkommerne må vurderes når du utfører layout beregninger for siden. Det inneholdte elementet må ha heightog widthegenskapene brukes, ellers kollapser det til null piksler. Bare elementet i seg selv må vurderes for beregning av sideoppsett, ettersom etterkommere ikke kan påvirke størrelsen på elementet. Det inneholdte elementets etterkommere hoppes fullstendig over i slike beregninger; som om det ikke hadde noen etterkommere i det hele tatt.
For å få full fordeler med optimalisering, brukes sizeinneslutningen vanligvis med andre inneslutningstyper.
Et element med sizeinneslutningen mottar en ny stablingskontekst i forhold til siden, og z-indexegenskapen kan brukes. Selv om retningsegenskaper, som topeller left, ikke gjelder.
Følgende demo gir en enkel forklaring på hva som skjer når sizeinneslutning brukes. Klikk hvor som helst for å veksle inneslutningen i den lilla boksen. Når inneslutningen påføres endres den lilla boksen i størrelse. Som standard er den lilla boksens høyde definert av barna, men med inneslutning må høyden defineres. Når inneslutningen er brukt, er etterkommerne ikke lenger involvert i størrelsesrelaterte layoutberegninger.
Stil
Den stylecontainment verdi informerer leseren at noen CSS egenskaper, for eksempel tellere og sitater, vil bli scoped til inneholdt element.
Egenskapene counter-incrementog counter-setmå avgrenses til elementets undertre. Hvis utvidet utenfor det inneholdte elementet, opprettes en ny teller.
Innholdet eiendoms verdier om open-quote, close-quote, no-open-quote, og no-close-quotemå være målrettet mot den inneholdte element sub-treet.
Denne inneslutningsverdien anses å være i fare for å bli fjernet fra spesifikasjonen.
Innhold
Den contentinnesluttende verdi er en kombinasjon av både utforming og maling inneslutnings verdier. Dette tilsvarer å bruke inneslutning på denne måten:
div ( contain: layout paint; )Alle potensielle fordeler beskrevet ovenfor for hver verdi vil da være tilgjengelig for det inneholdte elementet. Denne inneslutningen vil bli ansett som relativt trygg å bruke mye på flere elementer på siden.
Streng
Den strictinnesluttende verdi er en kombinasjon av layout, paintog sizeoppdemning verdier. Dette tilsvarer å bruke inneslutning på denne måten:
div ( contain: layout paint size; )Alle potensielle fordeler beskrevet ovenfor for hver verdi vil da være tilgjengelig for det inneholdte elementet.
Som den “strengeste” av inneslutningsverdiene, bør denne verdien brukes med nøye hensyn. Dette skyldes dimensjonskravene det stiller til det inneholdte elementet. Med disse kravene gir denne inneslutningsverdien de mest potensielle ytelsesfordelene ved inneslutning.
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 52 | 69 | Nei | 79 | Nei |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Nei |