Sadrže - CSS-trikovi

containNekretnina u CSS ukazuje na preglednik koji element i njegovi potomci smatraju neovisan od stabla dokumenta što je više moguće. To potencijalno donosi prednosti izvedbe s izračunima u izgledu, stilu, boji, veličini ili bilo kojoj kombinaciji za ograničeno područje DOM-a, a ne za cijelu stranicu.

Svojstvo ima pet standardnih vrijednosti i dvije stenografske vrijednosti koje kombiniraju varijacije standardnih vrijednosti. Svaka vrijednost ima neke jedinstvene i zajedničke koristi, ovisno o kontekstu elementa koji ih primjenjuje.

Tipična upotreba ovog svojstva je element koji sadrži sadržaj neke vrste. Razmislite o widgetu koji generira dolazne podatke koji mijenjaju izgled i vizuale potomaka elementa. Sljedeći element koji treba razmotriti je onaj koji sadrži rezultate podataka trećih strana, kao što je natpisni oglas, gdje nam blagodati ograničavanja daju prednost određivanju prioriteta slikanja određenog sadržaja, načinu postupanja s veličinom primljenog sadržaja ili određivanju da li sadržaj čak trebao biti vidljiv. S druge strane, uglavnom statično mjesto, dobit će malo koristi osim prvog izgleda i boje na zaslonu pri učitavanju stranice.

Sintaksa

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

Vrijednosti svojstava

Izgled

Vrijednost layoutsadržavanja obavještava preglednik da niti jedan od potomaka elementa ne utječe na druge elemente na stranici, niti ti drugi elementi imaju bilo kakav učinak na potomke sadržanog elementa. To omogućuje pregledniku da potencijalno smanji broj izračuna koji su potrebni prilikom izrade izgleda stranice

Druga je prednost što ako je sadržani element izvan zaslona ili je na neki način zaklonjen, tada preglednik može odgoditi ili pomaknuti povezane izračune na niži prioritet. Primjer za to je sadržani element koji se ne vidi na kraju blok elementa i vidljiv je početak tog blok elementa.

Element sa sadržajem layoutpostaje okvir za sadržaje za pozicionirane potomke - poput elemenata s apsolutnim pozicioniranjem. Element prima novi kontekst slaganja u odnosu na stranicu i z-indemože se koristiti svojstvo x. Iako se usmjerena svojstva, poput topili left, ne primjenjuju.

Iako potomci sadržanog elementa možda neće utjecati na druge elemente na stranici, i dalje mogu utjecati na njihov sadržani element pretka. Na primjer, potomak može uzrokovati da se sadržani element promijeni u veličini kao reakcija na promjene. U tom slučaju, sadržani element još uvijek može utjecati na druge elemente na stranici, ali potomci i dalje neće biti uključeni u te izračune.

Sljedeća demonstracija pruža jednostavno objašnjenje što se događa kada layoutse primijeni ograničenje. Klikom na svaki od gornjih okvira primjenjuje se sadržaj i crvene strelice će promijeniti izgled. Izgled crvenih strelica sugerira utječe li potomstvo okvira na ostale okvire na stranici tijekom izračuna izgleda.

Boja

Vrijednost paintsadržavanja obavještava preglednik da niti jedan od potomaka elementa neće biti obojan izvan okvira za rub elementa. Ako je pozicionirani element pozicioniran tako da ima dio svog ograničavajućeg okvira koji će ga presjeći sadržani element, border-boxtada taj dio neće biti obojan. Ako je potomak elementa potpuno postavljen izvan sadržanog elementa, border-boxon uopće nije obojan. To je slično primjeni overflow: hidden;na element, ali bez prednosti preskakanja ili smanjenja potrebnih izračuna.

Još jedna prednost je ta što ako sadržani element na neki način nije vidljiv u okviru za prikaz, tada može preskočiti potomke elementa prilikom izvođenja proračuna. Primjer za to je element koji se nalazi sa stranice lijevo od okvira za prikaz. Ako sadržani element nije vidljiv, to je jamstvo da njegov sadržaj neće biti vidljiv. Stoga nisu obvezni sudjelovati u izračunima boje.

Element s sadržajem painttakođer postaje okvir za sadržaje za pozicionirane potomke - poput elemenata s apsolutnim pozicioniranjem. Element također prima novi kontekst slaganja u odnosu na stranicu i z-indexsvojstvo se može koristiti. Iako se usmjerena svojstva, poput topili left, ne primjenjuju.

Pomični element može imati dodatne koristi postavljanjem njegovih potomaka u novi sloj boje koji može pomoći u izvedbi pomicanja. Normalno, elementi za pomicanje mogu uzrokovati stalne ponovne boje jer se potomci pojavljuju i nestaju tijekom pomicanja. Pomični element sa sadržajem boje može potencijalno preskočiti ovo stalno prebojavanje pomičnih potomaka.

Sljedeća demonstracija pruža jednostavno objašnjenje što se događa kada paintse primijeni ograničenje. Kliknite bilo gdje da biste prebacili sadržaj na ljubičastom okviru. Kada se primijeni ograničenje, neki od zelenih okvira mijenjaju se u izgledu. Izgled zelenih kutija pokazuje kako su obojene ili ne.

Veličina

Vrijednost sizeograničenja obavještava preglednik da nijedan od potomaka ne treba uzeti u obzir prilikom izvođenja proračuna izgleda stranice. Ograničena element mora imati heighti widthsvojstva primjenjuju ili će se srušiti na nulu piksela trg. Pri izračunu izgleda stranice treba uzeti u obzir samo sam element jer potomci ne mogu utjecati na veličinu elementa. Potomci sadržanog elementa u potpunosti se preskaču u takvim izračunima; kao da uopće nema potomaka.

Za sve prednosti optimizacije, sizesadržavanje se obično primjenjuje s drugim vrstama sadržaja.

Element s sadržajem sizeprima novi kontekst slaganja u odnosu na stranicu i z-indexsvojstvo se može koristiti. Iako se usmjerena svojstva, poput topili left, ne primjenjuju.

Sljedeća demonstracija pruža jednostavno objašnjenje što se događa kada sizese primijeni ograničavanje. Kliknite bilo gdje da biste prebacili sadržaj na ljubičastom okviru. Kada se primijeni ograničenje, ljubičasta se kutija mijenja u veličini. Prema zadanim postavkama visinu ljubičastog okvira definiraju njegova djeca, ali uz zadržavanje visina mora biti definirana. Jednom kada se primijeni ograničavanje, potomci više nisu uključeni u izračune izgleda vezanog uz veličinu.

Stil

Vrijednost styleograničenja obavještava preglednik da će se neka svojstva CSS-a, poput brojača i citata, dosegnuti do sadržanog elementa.

counter-incrementI counter-setsvojstva moraju biti opsegom uz ograničenu elementa pod-stablo. Ako se proširi izvan sadržanog elementa, kreira se novi brojač.

Vrijednosti Objekt sadržaj je od open-quote, close-quote, no-open-quotei no-close-quotemora se s opsegom uz ograničenu elementa pod-stablo.

Ova vrijednost sadržaja smatra se rizičnom da bude uklonjena iz specifikacije.

Sadržaj

Vrijednost contentzadržavanja kombinacija je i izgleda izgleda i vrijednosti zadržavanja boje. Ovo je ekvivalent primjene ograničavanja na ovaj način:

div ( contain: layout paint; )

Sve gore opisane potencijalne koristi za svaku vrijednost tada bi bile dostupne sadržanom elementu. Ovo bi se ograničenje smatralo relativno sigurnim za široku primjenu na više elemenata na stranici.

Strog

strictVrijednosti za sadržaj je kombinacija layout, paintte sizeza obuzdavanje vrijednosti. Ovo je ekvivalent primjene ograničavanja na ovaj način:

div ( contain: layout paint size; )

Sve gore opisane potencijalne koristi za svaku vrijednost tada bi bile dostupne sadržanom elementu.

Kao najstrožu vrijednost zadrške, ovu bi vrijednost trebalo pažljivo razmotriti. To je zbog zahtjeva za dimenzijama koje nameće sadržani element. Uz ove zahtjeve, ova vrijednost ograničavanja nudi najveće potencijalne koristi od zadržavanja.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom	Firefox	IE	Rub	Safari
52	69	Ne	79	Ne

Mobitel / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Ne