contain: границы влияния компонента на раскладку
Contain сообщает браузеру об изоляции некоторых аспектов элемента от остальной страницы. Его выбирают для конкретной модели компонента, а не как универсальную кнопку ускорения любого блока.
Назначение
Contain сообщает браузеру об изоляции некоторых аспектов элемента от остальной страницы. Его выбирают для конкретной модели компонента, а не как универсальную кнопку ускорения любого блока.
Как это работает
Значение layout вводит ограничения раскладки и отдельный контекст форматирования. Paint дополнительно ограничивает рисование границами области, size меняет зависимость размеров от содержимого. В примере используется только layout.
Пример
<style>.contained-note{contain:layout;padding:1rem;border:1px solid #95b4a0}.contained-note p{margin:.5rem 0}</style>
<section class="contained-note"><h3>Изолированная учебная заметка</h3><p>Содержимое остаётся обычным текстом документа.</p></section>Что должно получиться
Блок отображается как самостоятельная область раскладки. На таком маленьком примере ускорение может быть незаметно: назначение демонстрации — изучить поведение свойства и его границы.
Граница применения и частая ошибка
Contain может создавать содержащий блок и контекст наложения, меняя поведение позиционированных потомков. Size без продуманного размера способен схлопнуть область, paint — обрезать выступающие элементы. Не включайте strict на сложном компоненте без проверки.
Самостоятельная проверка
В своём документе добавьте позиционированного потомка и сравните containing block до и после layout. Отдельно испытайте paint на копии с выступающей декорацией. Измеряйте производительность на реальном объёме содержимого.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.