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 | Ні |