Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container {
  contain: strict;
}

Значения свойства contain

none — значение по умолчанию. Оно указывает, что контейнер не влияет на размеры или положение потомков.

strict — контейнер строго определяет размеры и положение потомков. Потомки не могут выходить за пределы контейнера и влиять на его размеры или позицию.

content — контейнер должен адаптировать свои размеры, чтобы потомки помещались внутри.

size — контейнер пытается автоматически подстроить свои размеры так, чтобы соответствовать потомкам и учесть их размеры и положение.

inline-size — элемент не будет изменять свою ширину при изменении содержимого.

layout — элемент не влияет на размеры других элементов и не мешает их позиционированию.

style — элемент не влияет на стилизацию других элементов, то есть браузер не будет пересчитывать стили других элементов, когда стиль данного элемента изменяется.

paint — элемент не влияет на окрашивание других элементов. Браузер не будет перерисовывать другие элементы, когда данный элемент изменяет свой вид, например, фоновый цвет или прозрачность.

Пример использования

💡 Поддержка браузерами свойства contain

Нюансы использования

  • В некоторых случаях, особенно при использовании строгого значения strict, браузер может потребовать дополнительных ресурсов для оптимизации рендеринга. Поэтому важно тестировать и измерять производительность при использовании свойства.
  • contain применяется к самому элементу и его содержимому, но не влияет на элементы, вложенные внутри него. Если требуется оптимизировать взаимодействие внутри вложенных элементов, нужно применить свойство contain к каждому из них отдельно.
  • Свойство наиболее полезно в ситуациях, когда у вас есть небольшой набор элементов, которые могут быть легко изолированы и оптимизированы. В случае сложных макетов с большим количеством элементов, использовать contain бывает сложно и неэффективно.