Den containegendom i CSS anger för webbläsaren att elementet och dess ättlingar anses oberoende av dokumentet trädet så mycket som möjligt. Detta ger potentiellt prestandafördelar med beräkningar i layout, stil, färg, storlek eller vilken kombination som helst för ett begränsat område av DOM och inte hela sidan.
Fastigheten har fem standardvärden och två stenografiska värden som kombinerar variationer av standardvärdena. Varje värde har några unika och delade fördelar beroende på sammanhanget för det element som tillämpar dem.
Den typiska användningen av den här egenskapen är ett element som innehåller innehåll av någon typ. Tänk på en widget som återger inkommande data som ändrar layout och visuella element för efterkommanden av elementet. Ett annat element att tänka på är en som innehåller resultaten av data från tredje part, till exempel en bannerannons, där fördelarna med inneslutning låter oss antingen prioritera målning av visst innehåll, hur man hanterar storlek på innehållet som tas emot eller avgöra om innehåll bör till och med vara synliga. En mestadels statisk webbplats, å andra sidan, kommer att få lite nytta förutom den första layouten och måla på skärmen vid sidbelastning.
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 */ )Fastighetsvärden
Layout
Det layoutinnes värdet informerar webbläsaren att ingen av elementet ättlingar påverkar andra element på sidan, inte heller de andra element har någon effekt på ättlingar till den inneslutna elementet. Detta gör att webbläsaren potentiellt kan minska antalet beräkningar som behövs när sidlayouten skapas
En annan fördel är att om det innehållna elementet är utanför skärmen eller döljs på något sätt, kan webbläsaren fördröja eller flytta relaterade beräkningar till en lägre prioritet. Ett exempel på detta är ett inneslutet element som inte syns i slutet av ett blockelement och början på det blockelementet är synligt.
Ett element med layoutinneslutning blir en innehållande ruta för placerade ättlingar - till exempel element med absolut positionering. Elementet får ett nytt staplingskontext i förhållande till sidan och z-indeegenskapen x kan användas. Även riktningsegenskaper, som topeller left, gäller inte.
Även om ättlingarna till det innehållna elementet kanske inte påverkar andra element på sidan kan de fortfarande påverka deras innehållna förfaderelement. Till exempel kan en ättling få det inneslutna elementet att ändra storlek som reaktion på förändringar. I det fallet kan det innehållna elementet fortfarande potentiellt påverka andra element på sidan men ättlingarna kommer fortfarande inte att vara inblandade i dessa beräkningar.
Följande demo ger en enkel förklaring till vad som händer när layoutinneslutningen tillämpas. När du klickar på var och en av de övre rutorna används inneslutningen och de röda pilarna ändras. Utseendet på de röda pilarna föreslår om efterkommorna till rutan påverkar de andra rutorna på sidan under layoutberäkningar.
Måla
Det paintinnes värdet informerar webbläsaren att ingen av ättlingar till elementet målas utanför gränsen-box av elementet. Om ett nedstigande element är placerat så att en del av sin avgränsningslåda kan klippas av det inneslutna elementet ska border-boxden delen inte målas. Om ett efterföljande element är placerat helt utanför det inneslutna elementet är border-boxdet inte målat alls. Detta liknar det som gäller overflow: hidden;för elementet, men utan fördelarna med att hoppa över eller minska nödvändiga beräkningar.
En annan fördel är att om det inneslutna elementet inte syns på något sätt i visningsområdet, kan det hoppa över elementets ättlingar vid målarberäkningar. Ett exempel på detta är ett element som placeras utanför sidan till vänster om visningsområdet. Om det innehållna elementet inte är synligt är det en garanti att dess innehåll inte kommer att synas. Därför är de inte skyldiga att vara involverade i färgberäkningar.
Ett element med paintinneslutningen blir också en innehållande ruta för placerade ättlingar - till exempel element med absolut positionering. Elementet får också ett nytt staplingskontext i förhållande till sidan och z-indexegenskapen kan användas. Även riktningsegenskaper, som topeller left, gäller inte.
Ett rullningselement kan få ytterligare fördelar genom att dess ättlingar placeras i ett nytt färglager som kan hjälpa till med rullningsprestanda. Normalt kan rullningselement orsaka konstant ommålning när avkommorna dyker upp och försvinner under rullning. Ett rullningselement med färginnehållet kan potentiellt hoppa över denna konstanta ommålning av rullande ättlingar.
Följande demo ger en enkel förklaring till vad som händer när paintinneslutningen tillämpas. Klicka var som helst för att växla inneslutningen i den lila rutan. När inneslutning tillämpas förändras några av de gröna rutorna i utseende. Utseendet på de gröna lådorna visar hur de är målade eller inte målade.
Storlek
Det sizeinnes värdet informerar webbläsaren att ingen av ättlingar måste beaktas när man utför layoutberäkningar för sidan. Det innehållna elementet måste ha heightoch widthegenskaper tillämpas, annars kollapsar det till noll pixlar. Endast själva elementet behöver beaktas vid beräkning av sidlayout eftersom ättlingar inte kan påverka elementets storlek. Det inneslutna elementets ättlingar hoppas över i sådana beräkningar; som om det inte hade några ättlingar alls.
För maximala fördelar med optimering sizetillämpas inneslutningen vanligtvis tillsammans med andra inneslutningstyper.
Ett element med sizeinneslutningen får ett nytt staplingskontext i förhållande till sidan och z-indexegenskapen kan användas. Även riktningsegenskaper, som topeller left, gäller inte.
Följande demo ger en enkel förklaring till vad som händer när sizeinneslutning tillämpas. Klicka var som helst för att växla inneslutningen i den lila rutan. När inneslutningen appliceras ändras den lila rutan i storlek. Som standard definieras den lila rutans höjd av dess barn, men med inneslutning måste höjden definieras. När inneslutningen har tillämpats är efterkommarna inte längre inblandade i storleksrelaterade layoutberäkningar.
Stil
Det styleinnes värdet informerar webbläsaren att vissa CSS-egenskaper, såsom diskar och citat, kommer att scoped till den inneslutna elementet.
Den counter-incrementoch counter-setegenskaper måste scoped till den inneslutna elementets underträd. Om den förlängs utanför det innehållna elementet skapas en ny räknare.
Innehålls fastighetens värderingar open-quote, close-quote, no-open-quoteoch no-close-quotemåste scoped till den inneslutna elementets underträd.
Detta inneslutningsvärde anses riskera att tas bort från specifikationen.
Innehåll
Det contentinnes värde är en kombination av både layout och färginneslutningsvärden. Detta motsvarar tillämpningen av inneslutning på detta sätt:
div ( contain: layout paint; )Alla potentiella fördelar som beskrivs ovan för varje värde skulle då vara tillgängliga för det innehållna elementet. Denna inneslutning anses vara relativt säker för att tillämpas allmänt på flera element på sidan.
Sträng
Det strictinneslutnings värde är en kombination av de layout, paintoch sizeinneslutningsvärden. Detta motsvarar tillämpningen av inneslutning på detta sätt:
div ( contain: layout paint size; )Alla potentiella fördelar som beskrivs ovan för varje värde skulle då vara tillgängliga för det innehållna elementet.
Som det ”strängaste” av inneslutningsvärdena bör detta värde användas med noggrann övervägande. Detta beror på de dimensionskrav som det ställer på det inneslutna elementet. Med dessa krav erbjuder detta inneslutningsvärde de mest potentiella fördelarna med inneslutning.
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 52 | 69 | Nej | 79 | Nej |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Nej |