Den containejendom i CSS indikerer til browseren, at elementet og dets efterkommere betragtes som uafhængige af dokumentet træet så meget som muligt. Dette giver potentielt ydelsesfordele ved beregninger i layout, stil, maling, størrelse eller enhver kombination for et begrænset område af DOM og ikke hele siden.
Ejendommen har fem standardværdier og to stenografiske værdier, der kombinerer variationer af standardværdierne. Hver værdi har nogle unikke og delte fordele afhængigt af sammenhængen med det element, der anvender dem.
Den typiske brug af denne egenskab er et element, der indeholder indhold af en eller anden type. Overvej en widget, der gengiver de indgående data, der ændrer layoutet og det visuelle for elementets efterkommere. Et andet element, der skal overvejes, er et, der indeholder resultaterne af tredjepartsdata, såsom en bannerannonce, hvor fordelene ved indeslutning giver os mulighed for enten at prioritere maling af bestemt indhold, hvordan vi håndterer størrelsen af det modtagne indhold eller afgøre, om indholdet skal endda være synlig. Et for det meste statisk sted vil på den anden side få mindre fordel end det første layout og maling til skærmen ved sideindlæsning.
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 */ )Ejendomsværdier
Layout
Den layoutinddæmning værdi informerer browseren, at ingen af elementet efterkommere påvirke andre elementer på siden, heller ikke de andre elementer have nogen effekt på efterkommere af den indeholdte element. Dette giver browseren mulighed for at reducere antallet af nødvendige beregninger, når sidelayoutet oprettes
En anden fordel er, at hvis det indeholdte element er off-screen eller skjult på en eller anden måde, så kan browseren muligvis forsinke eller skifte relaterede beregninger til en lavere prioritet. Et eksempel på dette er et indeholdt element, der ikke er synligt i slutningen af et blokelement, og begyndelsen af dette blokelement er synligt.
Et element med layoutindeslutning bliver en indeholdende kasse til placerede efterkommere - såsom elementer med absolut positionering. Elementet modtager en ny stablingskontekst i forhold til siden, og z-indeegenskaben x kan bruges. Selvom retningsbestemte egenskaber, såsom topeller left, ikke gælder.
Selv om efterkommerne af det indeholdte element muligvis ikke påvirker andre elementer på siden, kan de stadig påvirke deres indeholdte forfædreelement. For eksempel kan en efterkommer få det indeholdte element til at ændre størrelse som reaktion på ændringer. I så fald kan det indeholdte element stadig potentielt påvirke andre elementer på siden, men efterkommerne vil stadig ikke være involveret i disse beregninger.
Følgende demo giver en enkel forklaring på, hvad der sker, når layoutindeslutningen anvendes. Når du klikker på hver af de øverste felter, anvendes indeslutningen, og de røde pile ændrer udseende. Udseendet af de røde pile antyder, om efterkommerne af feltet påvirker de andre felter på siden under layoutberegninger.
Maling
Den paintinddæmning værdi informerer browseren, at ingen af efterkommere af elementet vil blive malet uden for grænsen-box af elementet. Hvis et efterkommende element er positioneret til at have en del af dets afgrænsningsboks, der skal klemmes af det indeholdte element, border-boxskal denne del ikke males. Hvis et efterfølgende element er placeret helt uden for det indeholdte element, er border-boxdet slet ikke malet. Dette svarer til anvendelse overflow: hidden;på elementet, men uden fordelene ved at springe over eller reducere de nødvendige beregninger.
En anden fordel er, at hvis det indeholdte element ikke er synligt på en eller anden måde inden for visningen, så kan det springe over efterkommerne af elementet, når man udfører maleriberegninger. Et eksempel på dette er et element, der er placeret fra siden til venstre for visningen. Hvis det indeholdte element ikke er synligt, er det en garanti for, at dets indhold ikke vil være synligt. Derfor er de ikke forpligtet til at være involveret i malingsberegninger.
Et element med paintindeslutningen bliver også et indeholdende felt til placerede efterkommere - såsom elementer med absolut positionering. Elementet modtager også en ny stablingskontekst i forhold til siden, og z-indexejendommen kan bruges. Selvom retningsbestemte egenskaber, såsom topeller left, ikke gælder.
Et rulleelement kan få yderligere fordele ved at få sine efterkommere anbragt i et nyt malingslag, der kan hjælpe med at rulle. Normalt kan rulleelementer forårsage konstant maling igen, når efterkommerne vises og forsvinder under rulle. Et rulleelement med malingsindeslutningen kan potentielt springe denne konstante ommaling af rullende efterkommere over.
Følgende demo giver en enkel forklaring på, hvad der sker, når paintindeslutningen anvendes. Klik et vilkårligt sted for at skifte indeslutning i det lilla felt. Når indeslutning anvendes, ændres nogle af de grønne felter i udseende. Udseendet af de grønne kasser viser, hvordan de males eller ikke males.
Størrelse
Den sizeinddæmning værdi informerer browseren at ingen af de efterkommere skal overvejes, når der udføres layout beregninger for siden. Det indeholdte element skal have heightog widthegenskaber anvendt, ellers kollapser det til nul pixel kvadrat. Kun selve elementet skal overvejes ved beregning af sidelayout, da efterkommere ikke kan påvirke størrelsen på elementet. Det indeholdte elements efterkommere springes fuldstændigt over i sådanne beregninger; som om det slet ikke havde nogen efterkommere.
For at få optimale fordele ved optimering anvendes sizeindeslutningen normalt sammen med andre indeslutningstyper.
Et element med sizeindeslutningen modtager en ny stablingskontekst i forhold til siden, og z-indexejendommen kan bruges. Selvom retningsbestemte egenskaber, såsom topeller left, ikke gælder.
Følgende demo giver en enkel forklaring på, hvad der sker, når sizeindeslutning anvendes. Klik et vilkårligt sted for at skifte indeslutning i det lilla felt. Når indeslutningen anvendes, ændres den lilla boks i størrelse. Som standard defineres den lilla boks højde af dens børn, men med indeslutning skal højden defineres. Når indeslutning er anvendt, er efterkommerne ikke længere involveret i størrelsesrelaterede layoutberegninger.
Stil
Den styleinddæmning værdi informerer browseren, at nogle CSS egenskaber, såsom tællere og citater, vil blive virkefelt til den indeholdte element.
Egenskaberne counter-incrementog counter-setskal afgrænses til det indeholdte elementets undertræ. Hvis den udvides uden for det indeholdte element, oprettes der en ny tæller.
Indholdet ejendommens værdier på open-quote, close-quote, no-open-quote, og no-close-quoteskal virkefelt til den indeholdte elementets sub-tree.
Denne indeslutningsværdi anses for at være i fare for at blive fjernet fra specifikationen.
Indhold
Den contentinddæmning værdi er en kombination af både layout og maling inddæmning værdier. Dette svarer til at anvende indeslutning på denne måde:
div ( contain: layout paint; )Alle de potentielle fordele beskrevet ovenfor for hver værdi vil derefter være tilgængelige for det indeholdte element. Denne indeslutning vil blive betragtet som relativt sikker at anvende bredt på flere elementer på siden.
Streng
Den strictindeslutning værdi er en kombination af layout, paintog sizeinddæmning værdier. Dette svarer til at anvende indeslutning på denne måde:
div ( contain: layout paint size; )Alle de potentielle fordele beskrevet ovenfor for hver værdi vil derefter være tilgængelige for det indeholdte element.
Da den "strengeste" af indeslutningsværdierne skal denne værdi bruges med nøje overvejelse. Dette skyldes de dimensionskrav, det pålægger det indeholdte element. Med disse krav tilbyder denne indeslutningsværdi de mest potentielle fordele ved indeslutning.
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 52 | 69 | Ingen | 79 | Ingen |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Ingen |