CSS contain — ізоляція елемента для швидшого рендеру

CSS властивість contain ізолює елемент від решти документа: обіцяє браузеру, що зміни всередині не вплинуть на зовнішній макет.

правити

Загальний опис

Це обіцянка, яку браузер приймає на віру й використовує для оптимізації. Якщо він знає, що вміст картки ніяк не зачепить сусідів, то при зміні цієї картки перерахує тільки її.

layout ізолює макет, paint забороняє малювати за межами елемента, size каже, що розмір не залежить від вмісту. Значення strict вмикає все одразу.

правити

Нотатка

contain: size вимагає, щоб розмір був заданий явно — інакше елемент схлопнеться в нуль. Це найнебезпечніше зі значень.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

contain: none | strict | content | [ size || layout || style || paint ];

Властивість contain може отримувати 6 значень:

none

Без ізоляції.

автор: NagarD

правити

layout

Внутрішній макет не впливає на зовнішній.

автор: NagarD

правити

paint

Нащадки не малюються за межами елемента.

автор: NagarD

правити

size

Розмір не залежить від вмісту.

автор: NagarD

правити

strict

Усі види ізоляції разом (size layout paint style).

автор: NagarD

правити

content

layout + paint + style.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
contain	52+	69+	15.4+	40+	79+	-

Підтримка: мобільні переглядачі

Переглядач
contain	52+	yes	yes	15.4+

Приклади

+ запропонувати свій приклад у пісочниці

<article class="widget">Незалежний віджет</article>

.widget {
    /* макет і малювання не виходять за межі */
    contain: layout paint;
}