A containCSS tulajdonság azt jelzi a böngésző számára, hogy az elemet és leszármazottait a lehető legnagyobb mértékben függetlennek tekintik a dokumentumfától. Ez potenciálisan teljesítményelőnyöket kínál az elrendezés, a stílus, a festék, a méret vagy bármely kombináció számításával a DOM korlátozott területére és nem az egész oldalra.
A tulajdonságnak öt standard értéke és két gyorsírási értéke van, amelyek egyesítik a standard értékek variációit. Minden értéknek egyedi és megosztott előnyei vannak, az őket alkalmazó elem környezetétől függően.
Ennek a tulajdonságnak a tipikus használata egy olyan elem, amely valamilyen típusú tartalmat tartalmaz. Vegyünk egy widgetet, amely megjeleníti a bejövő adatokat, amely megváltoztatja az elem leszármazottainak elrendezését és látványát. Figyelembe kell venni egy olyan elemet is, amely harmadik féltől származó adatok eredményeit tartalmazza, például egy szalaghirdetést, ahol a befogadás előnyei lehetővé teszik, hogy fontossági sorrendet helyezzünk el bizonyos tartalmak festéséről, hogyan kezeljük a beérkezett tartalom méretezését, vagy meghatározzuk, hogy a tartalom még láthatónak is kell lennie. Egy többnyire statikus webhely viszont az első elrendezésen és az oldalterheléskor a képernyőre festésen kívül kevés haszonnal jár.
Szintaxis
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 */ )Tulajdonságértékek
Elrendezés
A layoutvisszatartó érték arról tájékoztatja a böngészőt, hogy az elem egyik leszármazottja sem befolyásolja az oldal más elemeit, és ezeknek a többi elemnek sincs hatása a tartalmazott elem leszármazottaira. Ez lehetővé teszi a böngésző számára, hogy csökkentse az oldalelrendezés létrehozásához szükséges számítások számát
További előny, hogy ha a tartalmazott elem képernyőn kívül van, vagy valamilyen módon homályos, akkor a böngésző késleltetheti vagy alacsonyabb prioritásra terelheti a kapcsolódó számításokat. Példa erre egy olyan blokkelem, amely nem látható a blokkelem végén, és a blokkelem eleje látható.
A befogadóval rendelkező elem layoutlesz elhelyező doboz a pozicionált leszármazottak számára - például az abszolút helyzetű elemek. Az elem új halmozási kontextust kap az oldalhoz képest, és az z-index tulajdonság használható. Bár az iránytulajdonságok, például a topvagy left, nem érvényesek.
Annak ellenére, hogy a tartalmazott elem leszármazottai nem befolyásolhatják az oldal más elemeit, mégis befolyásolhatják a bennük lévő őselemet. Például egy leszármazott a benne lévő elem átméretezését okozhatja a változásokra reagálva. Ebben az esetben a tartalmazott elem továbbra is befolyásolhatja az oldal többi elemét, de az utódok továbbra sem vesznek részt ezekben a számításokban.
A következő bemutató egyszerű magyarázatot ad arra, hogy mi történik a layoutkorlátozás alkalmazásakor. Az egyes felső négyzetekre kattintva a konténer kerül alkalmazásra, és a piros nyilak megváltoztatják a megjelenését. A piros nyilak megjelenése arra utal, hogy a doboz leszármazói befolyásolják-e az oldal többi mezőjét az elrendezés számításai során.
Festék
A paintvisszatartó érték arról tájékoztatja a böngészőt, hogy az elem egyik leszármazottja sem lesz festve az elem határdobozán kívül. Ha egy leszármazó elem úgy van elhelyezve, hogy a határoló dobozának egy részét a benne levő elem lenyomja, border-boxakkor ezt a részt nem szabad festeni. Ha egy leszármazó elem teljesen a benne lévő elemen kívül helyezkedik el, border-boxakkor egyáltalán nem festik. Ez hasonlít overflow: hidden;az elemre való alkalmazáshoz , de a szükséges számítások kihagyásának vagy csökkentésének előnyei nélkül.
További előny, hogy ha a benne lévő elem valamilyen módon nem látható a nézetablakban, akkor a festési számítások elvégzésekor kihagyhatja az elem leszármazottait. Erre példa egy elem, amely a nézetablak bal oldalán található oldalról van elhelyezve. Ha a benne lévő elem nem látható, akkor garancia arra, hogy annak tartalma nem lesz látható. Ezért nem kötelesek részt venni a festék számításaiban.
A tárolóval ellátott elem paintegyben egy doboz lesz a pozicionált leszármazottak számára is - például az abszolút pozícionálású elemek. Az elem új halmozási kontextust is kap az oldalhoz képest, és a z-indextulajdonság használható. Bár az iránytulajdonságok, például a topvagy left, nem érvényesek.
A gördülő elem további előnyöket jelenthet, ha leszármazottait egy új festékrétegbe helyezik, amely elősegítheti a görgetés teljesítményét. Normális esetben a görgető elemek állandó újrafestést okozhatnak, mivel a leszármazottak megjelennek és eltűnnek a görgetés során. A gördülő elem a festéktartalmával potenciálisan kihagyhatja a gördülő leszármazottak ezt az állandó újrafestését.
A következő bemutató egyszerű magyarázatot ad arra, hogy mi történik a paintkorlátozás alkalmazásakor. Kattintson bárhová a lila mezőbe való váltáshoz. A konténer alkalmazásakor a zöld dobozok némelyike megváltozik. A zöld dobozok megjelenése megmutatja, hogyan festik vagy nem festik őket.
Méret
A sizevisszatartó érték arról tájékoztatja a böngészőt, hogy az oldal elrendezési számításainak elvégzésénél egyik utódot sem kell figyelembe venni. A tartalmazott elemnek tartalmaznia kell a tulajdonságokat, heightés widthalkalmaznia kell a tulajdonságokat, különben nulla pixel négyzetre fog összeomlani. Csak magát az elemet kell figyelembe venni az oldalelrendezés számításakor, mivel a leszármazottak nem befolyásolhatják az elem méretét. A tartalmazott elem leszármazottai teljesen kihagyásra kerülnek az ilyen számítások során; mintha egyáltalán nem lennének utódai.
Az optimalizálás teljes előnyeinek sizeelérése érdekében az elszigetelést általában más típusú elszigeteléssel együtt alkalmazzák.
A tárolóval rendelkező elem sizeúj halmozási kontextust kap az oldalhoz képest, és a z-indextulajdonság használható. Bár az iránytulajdonságok, például a topvagy left, nem érvényesek.
A következő bemutató egyszerű magyarázatot ad arra, hogy mi történik a sizekorlátozás alkalmazásakor. Kattintson bárhová a lila mezőbe való váltáshoz. A konténer alkalmazásakor a lila doboz mérete megváltozik. Alapértelmezés szerint a lila doboz magasságát a gyermekei határozzák meg, de az elszigeteléssel meg kell határozni a magasságot. A korlátozás alkalmazását követően a leszármazottak már nem vesznek részt a mérethez kapcsolódó elrendezési számításokban.
Stílus
A styletárolóérték tájékoztatja a böngészőt arról, hogy egyes CSS-tulajdonságok, például számlálók és idézőjelek a hatókörbe kerülnek.
A counter-incrementés counter-settulajdonságokat át kell terjedni a benne lévő elem alfájára. Ha a kiterjesztett elemen kívülre kiterjesztjük, akkor egy új számláló jön létre.
A tartalom ingatlan értékét open-quote, close-quote, no-open-quoteés no-close-quotemeg kell távcsöves a zárt elem al-fa.
Ez az elszigetelési érték veszélyeztetettnek tekinthető, ha eltávolítják a specifikációból.
Tartalom
A contentkonténment értéke az elrendezés és a festék konténer értékeinek kombinációja. Ez egyenértékű az elszigetelés ilyen módon történő alkalmazásával:
div ( contain: layout paint; )Az egyes értékeknél a fent leírt összes lehetséges előny elérhetővé válna a benne foglalt elem számára. Ez a tárolás viszonylag biztonságosnak tekinthető, ha az oldal több elemére széles körben alkalmazható.
Szigorú
Az strictelszigetelés érték kombinációja layout, paintés sizeelszigetelés értékeket. Ez egyenértékű az elszigetelés ilyen módon történő alkalmazásával:
div ( contain: layout paint size; )Az egyes értékeknél a fent leírt összes lehetséges előny elérhetővé válna a benne foglalt elem számára.
Mivel az elszigetelési értékek közül a „legszigorúbb”, ezt az értéket alapos mérlegeléssel kell használni. Ez annak a méretkövetelménynek köszönhető, amelyet a benne lévő elemre vet fel. Ezekkel a követelményekkel ez az elszigetelési érték valóban a legtöbb lehetséges teljesítményelőnyt kínálja a szigetelésnek.
Böngésző támogatás
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 52 | 69 | Nem | 79 | Nem |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | Nem |