containHotel v CSS kaže na brskalnik, ki so element in njegove potomce velja neodvisno od drevesa dokumenta, kolikor je to mogoče. To potencialno prinaša koristi pri zmogljivosti z izračuni v postavitvi, slogu, barvi, velikosti ali kateri koli kombinaciji za omejeno območje DOM in ne za celotno stran.
Lastnost ima pet standardnih vrednosti in dve stenografski vrednosti, ki kombinirata različice standardnih vrednosti. Vsaka vrednost ima nekaj edinstvenih in skupnih koristi, odvisno od konteksta elementa, ki jih uporablja.
Tipična uporaba te lastnosti je element, ki vsebuje neko vrsto vsebine. Razmislite o pripomočku, ki upodablja dohodne podatke, ki spreminjajo postavitev in vizualne elemente potomcev elementa. Drug element, ki ga je treba upoštevati, je tisti, ki vsebuje rezultate tujih podatkov, na primer oglas v pasici, kjer nam prednosti zadrževanja dajo bodisi prednost pred barvanjem določene vsebine, kako ravnati z velikostjo prejete vsebine ali ugotoviti, ali vsebina mora biti celo viden. Po drugi strani pa bo večinoma statično spletno mesto prineslo le malo koristi, razen prve postavitve in barve na zaslonu ob nalaganju strani.
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 */ )Vrednosti lastnosti
Postavitev
Vrednost layoutzadrževanja obvesti brskalnik, da noben od potomcev elementa ne vpliva na druge elemente na strani, niti ti drugi elementi nimajo nobenega vpliva na potomce vsebovanega elementa. To omogoča brskalniku, da potencialno zmanjša število izračunov, potrebnih pri ustvarjanju postavitve strani
Druga prednost je, da če je vsebovani element zunaj zaslona ali je na nek način zakrit, lahko brskalnik zamakne ali premakne povezane izračune na nižjo prioriteto. Primer tega je zaprti element, ki ni viden na koncu elementa bloka in je viden začetek tega elementa bloka.
Element z layoutzadrževanjem postane polje z vsebino za pozicionirane potomce - na primer elemente z absolutnim pozicioniranjem. Element prejme nov kontekst zlaganja glede na stran in z-indelastnost x je mogoče uporabiti. Kljub temu smerne lastnosti, na primer topali left, ne veljajo.
Čeprav potomci vsebovanega elementa morda ne bodo vplivali na druge elemente na strani, lahko še vedno vplivajo na njihov zaprti element prednika. Na primer, potomec lahko povzroči, da se element v elementu spremeni kot odziv na spremembe. V tem primeru lahko vsebovani element še vedno lahko vpliva na druge elemente na strani, vendar potomci še vedno ne bodo vključeni v te izračune.
Naslednja predstavitev ponuja preprosto razlago, kaj se zgodi, ko se layoutzadrževanje uporabi. Ko kliknete vsako zgornje polje, se uporabi zadrževanje in rdeče puščice bodo spremenile videz. Videz rdečih puščic kaže, ali potomci polja med izračuni postavitve vplivajo na druga polja na strani.
Barva
Vrednost paintzadrževanja obvesti brskalnik, da noben od potomcev elementa ne bo pobarvan zunaj mejnega polja elementa. Če je nameščeni element postavljen tako, da ima del njegovega omejevalnega polja, ki ga pripnejo vsebovani elementi, border-boxpotem tega dela ni treba barvati. Če je potomski element v celoti nameščen zunaj vsebovanih elementov, border-boxpotem sploh ni pobarvan. To je podobno kot overflow: hidden;pri elementu, vendar brez prednosti preskakovanja ali zmanjšanja potrebnih izračunov.
Druga prednost je ta, da če vsebovani element na neki način ni viden v oknu za ogled, lahko med izračunom slikanja preskoči potomce elementa. Primer tega je element, ki je postavljen s strani na levi strani vidnega polja. Če vsebovani element ni viden, je zagotovilo, da njegova vsebina ne bo vidna. Zato jim ni treba sodelovati pri izračunih barv.
Element z paintzadrževalnikom postane tudi polje z vsebinami za pozicionirane potomce - na primer elemente z absolutnim pozicioniranjem. Element prejme tudi nov kontekst zlaganja glede na stran in z-indexlastnost se lahko uporabi. Kljub temu smerne lastnosti, na primer topali left, ne veljajo.
Drsni element lahko prinese dodatne koristi, če njegove potomce položite v novo barvno plast, ki lahko pomaga pri pomiku. Običajno lahko drsni elementi povzročijo nenehne prebarvane slike, saj se potomci med drsenjem pojavljajo in izginjajo. Drsni element z vsebnikom barve lahko potencialno preskoči to nenehno prebarvanje drsnih potomcev.
Naslednja predstavitev ponuja preprosto razlago, kaj se zgodi, ko se paintzadrževanje uporabi. Kliknite kjer koli, da preklopite zadrževalnik na vijoličnem polju. Ko se uporabi zadrževanje, se nekatera zelena polja spremenijo v videzu. Videz zelenih škatel kaže, kako so pobarvane ali ne.
Velikost
Vrednost sizezadrževanja obvesti brskalnik, da pri izračunih postavitve strani ni treba upoštevati nobenega od potomcev. Vsebovani element mora imeti heightin widthuporabljene lastnosti, sicer se bo strnil na kvadrat ničelnih pik. Pri izračunih postavitve strani je treba upoštevati samo sam element, saj potomci ne morejo vplivati na velikost elementa. V takšnih izračunih so potomci vsebovanega elementa popolnoma preskočeni; kot da sploh ne bi imela potomcev.
Za popolne prednosti optimizacije se sizezadrževanje običajno uporablja z drugimi vrstami zadrževanja.
Element z sizezadrževanjem prejme nov kontekst zlaganja glede na stran in z-indexlastnost se lahko uporabi. Kljub temu smerne lastnosti, na primer topali left, ne veljajo.
Naslednja predstavitev ponuja preprosto razlago, kaj se zgodi, ko sizese uporabi zadrževanje. Kliknite kjer koli, da preklopite zadrževalnik na vijoličnem polju. Ko je zadrževanje uporabljeno, se vijolično polje spremeni v velikost. Privzeto višino vijoličnega polja določajo njegovi podrejeni elementi, vendar je treba z zadrževanjem določiti višino. Ko je zadrževanje uporabljeno, potomci niso več vključeni v izračune postavitve, povezane z velikostjo.
Slog
Vrednost stylezadrževanja obvešča brskalnik, da bodo nekatere lastnosti CSS, na primer števci in narekovaji, omejene na vsebovani element.
Lastnosti counter-incrementin counter-setlastnosti je treba omejiti na pod drevo vsebovanega elementa. Če je razširjen zunaj vsebovanega elementa, se ustvari nov števec.
Vrednosti premoženja, je vsebina open-quote, close-quote, no-open-quote, in no-close-quotemora biti zasnovan z mislijo, da v zaprtem elementa v sub-tree.
Ta vrednost zadrževanja velja za tvegano, da bo odstranjena iz specifikacije.
Vsebina
Vrednost contentzadrževanja je kombinacija postavitve in vrednosti zadrževanja barve. To je enakovredno uporabi zadrževanja na ta način:
div ( contain: layout paint; )Vse omenjene potencialne koristi za vsako vrednost bi bile nato na voljo vsebovanemu elementu. To zadrževanje bi veljalo za sorazmerno varno za široko uporabo za več elementov na strani.
Strogo
strictVrednost zadrževalnega je kombinacija layout, paintin sizevrednostmi zadrževanja. To je enakovredno uporabi zadrževanja na ta način:
div ( contain: layout paint size; )Vse omenjene potencialne koristi za vsako vrednost bi bile nato na voljo vsebovanemu elementu.
Kot najstrožjo vrednost zadrževalnih vrednosti je treba to vrednost uporabljati s skrbnim premislekom. To je posledica dimenzijskih zahtev, ki jih nalaga vsebovanemu elementu. S temi zahtevami ta vrednost zadrževanja ponuja največ potencialnih prednosti zadrževanja.
Podpora brskalnika
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 52 | 69 | Ne | 79 | Ne |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Ne |