contain
Обещает браузеру, что элемент не зависит от остальной страницы, поэтому изменения внутри него не заставляют пересчитывать всю страницу.
Синтаксис
contain: layout paint;Значения
| Параметр | Тип | Описание |
|---|---|---|
| layout | keyword | Раскладка внутри ни на что снаружи не влияет. |
| paint | keyword | Ничего изнутри не рисуется за пределами элемента (обрезается, как при `overflow: hidden`). |
| size, inline-size | keyword | Размер элемента не зависит от содержимого (`inline-size` — только ширина). |
| style | keyword | Счётчики внутри не влияют на счётчики снаружи. |
| content, strict | keyword | Сокращения: `content` = layout + paint + style, `strict` = то же плюс size. |
Примеры
Виджет с contain: paint обрезает выступающий значок:
<style>
.widget {
contain: paint;
width: 200px; padding: 12px; border: 1px solid #ccc; position: relative;
}
.badge { position: absolute; top: -10px; right: -10px; background: crimson; color: white; padding: 2px 8px; }
</style>
<div class="widget">
Chat widget
<span class="badge">New</span>
</div>Примечания
contain — подсказка для оптимизации, но с видимыми последствиями: paint обрезает, а size схлопывает пустой элемент до 0, если не задать ему размер. Контейнерные запросы сами ставят contain: inline-size через container-type. Обычно content-visibility: auto даёт выигрыш с меньшим риском. Поддерживается всеми актуальными браузерами.
См. также
- content-visibility — Позволяет браузеру не раскладывать и не рисовать содержимое элемента, пока он за пределами экрана, — дешёвое ускорение длинных страниц.
- @container — Применяет правила в зависимости от размера контейнера, а не окна.
- overflow — Что делать с содержимым, которое не помещается в элемент.
- will-change — Предупреждает браузер, что свойство скоро изменится, чтобы он подготовился заранее.
В учебнике
- Скорость страницы — Основы быстрой загрузки для HTML и CSS — блокирующий CSS и критические стили, preload и preconnect, размеры картинок, loading=lazy и fetchpriority, content-visibility и contain, сдвиги вёрстки и проверка в Lighthouse.