В containимота в CSS показва в браузъра, който елементът и неговите потомци се считат за независими от дървото с документи, доколкото е възможно. Това потенциално осигурява предимства на производителността с изчисления в оформление, стил, боя, размер или всяка комбинация за ограничена област на DOM, а не за цялата страница.
Свойството има пет стандартни стойности и две стенографски стойности, които комбинират вариации на стандартните стойности. Всяка стойност има някои уникални и споделени предимства в зависимост от контекста на елемента, който ги прилага.
Типичното използване на това свойство е елемент, който съдържа съдържание от някакъв тип. Помислете за приспособление, което изобразява входящите данни, които променят оформлението и визуалните елементи на потомците на елемента. Друг елемент, който трябва да се вземе предвид, е този, който съдържа резултатите от данни на трети страни, като банерна реклама, където предимствата на ограничаването ни позволяват или да премахнем приоритетите за рисуване на определено съдържание, как да се справим с оразмеряването на полученото съдържание или да определим дали съдържанието дори трябва да се вижда. Предимно статичният сайт, от друга страна, ще получи малка полза, освен първото оформление и рисуване на екрана при зареждане на страницата.
Синтаксис
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свойството x може да се използва. Въпреки това, насочените свойства, като 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съдържанието информира браузъра, че някои CSS свойства, като броячи и кавички, ще бъдат обхванати до съдържащия елемент.
В 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; )Тогава всички потенциални ползи, описани по-горе за всяка стойност, ще бъдат достъпни за съдържащия елемент.
Като „най-строгата“ от стойностите на съдържанието, тази стойност трябва да се използва внимателно. Това се дължи на изискванията за измерение, които налага на съдържащия елемент. С тези изисквания тази стойност на ограничението предлага най-потенциалните ползи от ефективността на ограничаването.
Поддръжка на браузър
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | IE | Ръб, край | Сафари |
|---|---|---|---|---|
| 52 | 69 | Не | 79 | Не |
Мобилен / таблет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Не |