containИмовина у ЦСС указује на претраживачу који елемент и његови потомци се сматрају независним од дрвета документа што је више могуће. Ово потенцијално доноси предности перформанси с прорачунима у распореду, стилу, боји, величини или било којој комбинацији за ограничено подручје ДОМ-а, а не за целу страницу.
Својство има пет стандардних вредности и две стенографске вредности које комбинују варијације стандардних вредности. Свака вредност има неке јединствене и заједничке користи у зависности од контекста елемента који их примењује.
Типична употреба овог својства је елемент који садржи садржај неке врсте. Размислите о виџету који приказује долазне податке који мењају изглед и визуелне елементе потомака елемента. Други елемент који треба размотрити је онај који садржи резултате података треће стране, као што је оглас у натпису, где нам предности задржавања омогућавају да или не одредимо приоритет сликања одређеног садржаја, како поступамо са одређивањем величине примљеног садржаја или утврђујемо да ли садржај чак требало да буде видљиво. С друге стране, углавном статична веб локација ће имати мало користи осим првог изгледа и боје на екрану при учитавању странице.
Синтакса
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 */ )Вредности имовине
Изглед
Вредност layoutограничења обавештава прегледач да нико од потомака елемента не утиче на друге елементе на страници, нити ти други елементи имају било какав утицај на потомке садржаног елемента. Ово омогућава прегледачу да потенцијално смањи број израчунавања неопходних приликом креирања изгледа странице
Још једна предност је та што ако је садржани елемент ван екрана или је на неки начин замрачен, тада прегледач може одложити или пребацити повезане прорачуне на нижи приоритет. Пример за то је садржани елемент који се не види на крају блок елемента и почетак тог блок елемента је видљив.
Елемент са layoutсадржајем постаје оквир за садржаје за позициониране потомке - као што су елементи са апсолутним позиционирањем. Елемент прима нови контекст слагања у односу на страницу и z-indeсвојство к се може користити. Иако се својства усмерења, попут topили left, не примењују.
Иако потомци садржаног елемента можда неће утицати на друге елементе на страници, и даље могу утицати на свој садржани елемент претка. На пример, потомак може проузроковати да се садржани елемент промени у величини као реакција на промене. У том случају, садржани елемент и даље може потенцијално утицати на друге елементе на страници, али потомци и даље неће бити укључени у те прорачуне.
Следећа демонстрација пружа једноставно објашњење шта се дешава када layoutсе примени ограничење . Кликом на сваки од горњих оквира примењује се задржавање и црвене стрелице ће променити изглед. Појава црвених стрелица сугерише да ли потомци оквира утичу на остале оквире на страници током израчунавања изгледа.
Боја
Вредност paintзадржавања обавештава прегледач да нико од потомака елемента неће бити обојен изван оквира за оквир елемента. Ако је позиционирани елемент позициониран тако да има део свог ограничавајућег оквира који треба да га исече садржани елемент, border-boxтада тај део неће бити обојен. Ако је потомак елемента позициониран у потпуности изван садржаног елемента, border-boxон уопште није обојен. Ово је слично примени overflow: hidden;на елемент, али без користи од прескакања или смањења потребних прорачуна.
Још једна предност је та што ако садржани елемент на неки начин није видљив у оквиру за приказ, тада може прескочити потомке елемента приликом извођења прорачуна. Пример овога је елемент који је постављен са странице лево од оквира за приказ. Ако садржани елемент није видљив, то је гаранција да његов садржај неће бити видљив. Због тога се од њих не захтева да учествују у прорачунима боје.
Елемент са paintсадржајем такође постаје оквир за смештање позиционираних потомака - као што су елементи са апсолутним позиционирањем. Елемент такође прима нови контекст слагања у односу на страницу и z-indexсвојство се може користити. Иако се својства усмерења, попут topили left, не примењују.
Клизни елемент може добити додатне користи постављањем његових потомака у нови слој боје који може помоћи у перформансама помицања. Обично елементи за помицање могу проузроковати сталне поновне боје, јер се потомци појављују и нестају током помицања. Клизни елемент са садржајем боје може потенцијално да прескочи ово стално префарбавање помичних потомака.
Следећа демонстрација пружа једноставно објашњење шта се дешава када paintсе примени ограничење . Кликните било где да бисте пребацили садржај на љубичастом пољу. Када се примени ограничење, неки од зелених оквира се мењају у изгледу. Изглед зелених кутија показује како су обојене или не.
Величина
Вредност sizeограничења обавештава прегледач да ниједан од потомака не мора да се узме у обзир приликом извођења прорачуна изгледа странице. Садржаних елемент мора имати heightи widthособине примењене, или ће пропасти до нула пиксела квадрат. За прорачун изгледа странице треба узети у обзир само сам елемент јер потомци не могу утицати на величину елемента. Потомци садржаног елемента у потпуности се прескачу у таквим прорачунима; као да уопште нема потомке.
Да би се у потпуности искористиле предности оптимизације, sizeзадржавање се обично примењује са другим врстама задржавања.
Елемент са sizeсадржајем прима нови контекст слагања у односу на страницу и z-indexсвојство се може користити. Иако се својства усмерења, попут topили left, не примењују.
Следећа демонстрација пружа једноставно објашњење шта се дешава када sizeсе примени ограничење . Кликните било где да бисте пребацили садржај на љубичастом пољу. Када се примени ограничење, љубичасто поље се мења у величини. Подразумевано висину љубичасте кутије дефинишу њена деца, али уз задржавање висина мора бити дефинисана. Једном када се примени ограничење, потомци више нису укључени у прорачуне распореда који се односе на величину.
Стил
Вредност styleограничења обавештава прегледач да ће се нека својства ЦСС-а, попут бројача и цитата, применити на садржани елемент.
counter-incrementИ counter-setособине морају бити сцопед да садржаних елемента под дрветом. Ако се прошири изван садржаног елемента, креира се нови бројач.
Вредности садржаја имовине је за open-quote, close-quote, no-open-quote, и no-close-quoteмора бити сцопед да садржаних елемента под дрветом.
Ова вредност садржаја сматра се ризичном да буде уклоњена из спецификације.
Садржај
Вредност contentзадржавања је комбинација вредности распореда и боје. Ово је еквивалент примене ограничења на овај начин:
div ( contain: layout paint; )Све потенцијалне користи описане горе за сваку вредност би тада биле доступне садржаном елементу. Ово задржавање сматрало би се релативно сигурним за широку примену на више елемената на страници.
Строго
strictВредност задржавања је комбинација layout, paintи sizeсузбијања вредности. Ово је еквивалент примене ограничења на овај начин:
div ( contain: layout paint size; )Све потенцијалне користи описане горе за сваку вредност би тада биле доступне садржаном елементу.
Као најстрожу од вредности садржаја, ову вредност треба користити са пажљивим разматрањем. То је због захтева за димензијама које намеће садржани елемент. Уз ове захтеве, ова вредност ограничавања нуди највише потенцијалних благодати учинка задржавања.
Подршка прегледача
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 52 | 69 | Не | 79 | Не |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 81 | Не |