Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain
говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.
⭐ CSS-свойство contain
определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.
Синтаксис
.container {
contain: strict;
}
Значения свойства contain
none
— значение по умолчанию. Оно указывает, что контейнер не влияет на размеры или положение потомков.
strict
— контейнер строго определяет размеры и положение потомков. Потомки не могут выходить за пределы контейнера и влиять на его размеры или позицию.
content
— контейнер должен адаптировать свои размеры, чтобы потомки помещались внутри.
size
— контейнер пытается автоматически подстроить свои размеры так, чтобы соответствовать потомкам и учесть их размеры и положение.
inline-size
— элемент не будет изменять свою ширину при изменении содержимого.
layout
— элемент не влияет на размеры других элементов и не мешает их позиционированию.
style
— элемент не влияет на стилизацию других элементов, то есть браузер не будет пересчитывать стили других элементов, когда стиль данного элемента изменяется.
paint
— элемент не влияет на окрашивание других элементов. Браузер не будет перерисовывать другие элементы, когда данный элемент изменяет свой вид, например, фоновый цвет или прозрачность.
Пример использования
💡 Поддержка браузерами свойства contain
Нюансы использования
- В некоторых случаях, особенно при использовании строгого значения
strict
, браузер может потребовать дополнительных ресурсов для оптимизации рендеринга. Поэтому важно тестировать и измерять производительность при использовании свойства. contain
применяется к самому элементу и его содержимому, но не влияет на элементы, вложенные внутри него. Если требуется оптимизировать взаимодействие внутри вложенных элементов, нужно применить свойствоcontain
к каждому из них отдельно.- Свойство наиболее полезно в ситуациях, когда у вас есть небольшой набор элементов, которые могут быть легко изолированы и оптимизированы. В случае сложных макетов с большим количеством элементов, использовать
contain
бывает сложно и неэффективно.