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

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

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

Синтаксис

.container {
  contain: strict;
}

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

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

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

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

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

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

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

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

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

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

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

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

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