Sisältää - CSS-temppuja

containOmaisuus CSS kertoo selaimelle, että elementti ja sen jälkeläiset ovat riippumattomia dokumenttipuussa mahdollisimman paljon. Tämä tarjoaa mahdollisesti suorituskykyetuja laskemalla asettelun, tyylin, maalin, koon tai minkä tahansa yhdistelmän rajoitetulle DOM-alueelle eikä koko sivulle.

Kohteessa on viisi vakioarvoa ja kaksi lyhytarvoista arvoa, jotka yhdistävät vakioarvojen muunnelmat. Jokaisella arvolla on joitain ainutlaatuisia ja jaettuja etuja niitä käyttävän elementin kontekstista riippuen.

Tämän ominaisuuden tyypillinen käyttö on elementti, joka sisältää jonkin tyyppistä sisältöä. Harkitse widgetiä, joka renderöi saapuvat tiedot ja muuttaa elementin jälkeläisten asettelua ja ulkoasua. Toinen huomioitava elementti on kolmansien osapuolten tietojen, kuten bannerimainoksen, tulokset, joissa eristämisen edut antavat meille joko priorisoida tietyn sisällön maalaamista, miten käsitellä vastaanotetun sisällön kokoa tai määrittää onko sisältö pitäisi olla jopa näkyvissä. Toisaalta enimmäkseen staattinen sivusto saa vain vähän muuta hyötyä kuin ensimmäinen asettelu ja maalaus ruudulle sivun latautumisen yhteydessä.

Syntaksi

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

Ominaisuusarvot

Layout

layoutSuojarakennus arvo informoi selainta, että mikään elementin jälkeläiset vaikuttavat muut elementit sivulla, eivätkä nämä muut elementit mitään vaikutusta jälkeläisten suljetun elementin. Tämän avulla selain voi vähentää tarvittavien laskelmien määrää sivun asettelua luodessa

Toinen etu on, että jos sisältyvä elementti on näytön ulkopuolella tai peitetty jollakin tavalla, selain voi viivästyttää tai siirtää siihen liittyviä laskutoimituksia alempaan prioriteettiin. Esimerkki tästä on suljettu elementti, jota ei ole näkyvissä lohkoelementin päässä ja kyseisen lohkoelementin alku on näkyvissä.

Elementti, jossa on layouteristys, tulee sisältäväksi laatikoksi sijoitetuille jälkeläisille - kuten absoluuttisesti sijoittuvat elementit. Elementti saa uuden pinoamiskontekstin suhteessa sivuun ja z-indeominaisuutta x voidaan käyttää. Suuntaominaisuudet, kuten toptai left, eivät päde.

Vaikka sisällytetyn elementin jälkeläiset eivät välttämättä vaikuta muihin sivun elementteihin, he voivat silti vaikuttaa sisältyvään esi-elementtiin. Esimerkiksi jälkeläinen voi saada sisältämän elementin koon muuttumaan reaktiona muutoksiin. Siinä tapauksessa sisältyvä elementti voi silti mahdollisesti vaikuttaa muihin sivun elementteihin, mutta jälkeläiset eivät silti ole mukana näissä laskelmissa.

Seuraava esittely tarjoaa yksinkertaisen selityksen siitä, mitä tapahtuu, kun layoutsuojarakennetta käytetään. Kun napsautat kutakin ylintä laatikkoa, suojarakenne otetaan käyttöön ja punaiset nuolet muuttavat ulkonäköään. Punaisten nuolien ulkonäkö viittaa siihen, vaikuttavatko laatikon jälkeläiset sivun muihin laatikoihin asettelulaskelmien aikana.

Maali

paintSuojarakennus arvo informoi selainta, että yksikään jälkeläiset elementin maalataan rajojen ulkopuolella box elementin. Jos jälkeläisen elementti on sijoitettu siten, että osa sen rajoittavasta laatikosta on leikattu sisältyvän elementin avulla, border-boxkyseistä osaa ei saa maalata. Jos jälkeläinen elementti sijoitetaan kokonaan sisällytetyn elementin ulkopuolelle, border-boxsitä ei maalata ollenkaan. Tämä on samanlainen kuin overflow: hidden;elementtiin soveltaminen , mutta ilman etuja tarvittavien laskelmien ohittamisesta tai vähentämisestä.

Toinen etu on, että jos sisältyvä elementti ei ole jollakin tavalla näkyvissä näkymässä, se voi ohittaa elementin jälkeläiset maalauslaskelmia suoritettaessa. Esimerkki tästä on elementti, joka sijoitetaan sivun ulkopuolelle näkymän vasemmalle puolelle. Jos sisällytetty elementti ei ole näkyvissä, se takaa, että sen sisältö ei ole näkyvissä. Siksi heidän ei tarvitse olla mukana maalilaskelmissa.

paintSuojarakennetta sisältävästä elementistä tulee myös sisältävä laatikko sijoitetuille jälkeläisille - kuten elementit, joilla on absoluuttinen sijainti. Elementti saa myös uuden pinoamiskontekstin suhteessa sivuun, ja z-indexominaisuutta voidaan käyttää. Suuntaominaisuudet, kuten toptai left, eivät päde.

Vierityselementti voi saada lisäetuja, kun sen jälkeläiset asetetaan uuteen maalikerrokseen, joka voi auttaa vierityksen suorituskyvyssä. Normaalisti vierityselementit voivat aiheuttaa jatkuvia uudelleenmaalauksia, kun jälkeläiset ilmestyvät ja katoavat vierityksen aikana. Vierivä elementti, jossa on maalin eristys, voi ohittaa vierittävien jälkeläisten jatkuvan uudelleenmaalaamisen.

Seuraava esittely tarjoaa yksinkertaisen selityksen siitä, mitä tapahtuu, kun paintsuojarakennetta käytetään. Napsauta mitä tahansa kohtaa vaihtaaksesi suojauksen purppuranruutuun. Kun suojarakennusta käytetään, jotkut vihreät laatikot muuttuvat ulkonäöltään. Vihreiden laatikoiden ulkonäkö osoittaa, kuinka ne maalataan tai ei maalata.

Koko

sizeSuojarakennus arvo informoi selainta, että mikään jälkeläisistä on otettava huomioon, kun suoritetaan asettelu laskelmia sivulle. Suljetusta elementti on oltava heightja widthominaisuuksia käytetään, tai se romahtaa nollaan pikseliä neliön. Ainoastaan ​​itse elementti on otettava huomioon sivun asettelulaskelmissa, koska jälkeläiset eivät voi vaikuttaa elementin kokoon. Sisältyvän elementin jälkeläiset ohitetaan kokonaan tällaisissa laskelmissa; ikään kuin sillä ei olisi yhtään jälkeläistä.

Optimoinnin täyden hyödyn saavuttamiseksi sizesuojarakennusta käytetään yleensä muiden suojarakennetyyppien kanssa.

sizeSuojarakennetta sisältävä elementti saa uuden pinontakontekstin suhteessa sivuun, ja z-indexominaisuutta voidaan käyttää. Suuntaominaisuudet, kuten toptai left, eivät päde.

Seuraava esittely tarjoaa yksinkertaisen selityksen siitä, mitä tapahtuu, kun sizesuojarakennetta käytetään. Napsauta mitä tahansa kohtaa vaihtaaksesi suojauksen purppuranruutuun. Kun suojarakennetta käytetään, purppuran laatikon koko muuttuu. Purppuranpunaisen laatikon korkeus määritetään oletusarvoisesti sen lapset, mutta korkeudessa on oltava korkeus. Kun suojarakenne on asetettu, jälkeläiset eivät enää ole mukana kokoon liittyvissä asettelulaskelmissa.

Tyyli

styleSuojarakennus arvo informoi selainta, että jotkut CSS-ominaisuuksia, kuten laskureita ja lainauksia, se scoped suljetun elementin.

counter-incrementJa counter-setominaisuudet on scoped suljetun elementin alipuuhun. Jos se laajennetaan sisältämän elementin ulkopuolelle, luodaan uusi laskuri.

Sisällön kiinteistön arvot open-quote, close-quote, no-open-quote, ja no-close-quoteon scoped suljetun elementin alipuuhun.

Tämän suoja-arvon katsotaan olevan vaarassa poistaa se eritelmästä.

Sisältö

contentSuojarakennus arvo on yhdistelmä sekä layout ja maali suojarakennuksen arvoja. Tämä vastaa eristämisen soveltamista tällä tavalla:

div ( contain: layout paint; )

Kaikki yllä kuvatut potentiaaliset edut kullekin arvolle olisivat tällöin sisältyvän elementin käytettävissä. Tätä suojarakennetta pidetään suhteellisen turvallisena soveltaa laajalti useisiin sivun elementteihin.

Tiukka

strictSuojarakennus arvo on yhdistelmä layout, paintja sizesuojarakennuksen arvot. Tämä vastaa eristämisen soveltamista tällä tavalla:

div ( contain: layout paint size; )

Kaikki yllä kuvatut potentiaaliset edut kullekin arvolle olisivat tällöin sisältyvän elementin käytettävissä.

Koska rajoitusarvo on "tiukin", tätä arvoa tulisi käyttää huolellisesti. Tämä johtuu mitoitusvaatimuksista, joita se asettaa sisältämälle elementille. Näiden vaatimusten mukaan tämä suojarakennuksen arvo tarjoaa suurimmat mahdolliset suojauksen suorituskykyedut.

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi	Firefox	IE	Reuna	Safari
52	69	Ei	79	Ei

Matkapuhelin / tabletti

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Ei