CSS-свойство `contain`

CSS-свойство contain CSS указывает, что элемент и его содержимое по возможности независимы от остальной части дерева документа. Изоляция позволяет отделить подраздел DOM, что повышает производительность за счёт ограничения вычислений макета, стиля, отрисовки, размеров или любой их комбинации поддеревом DOM, а не всей страницей. Изоляцию также можно использовать для ограничения области действия CSS-счётчиков и кавычек.

Попробуйте

contain: none;

contain: size;

contain: layout;

contain: paint;

contain: strict;

<section class="default-example" id="default-example">
  <div class="card" id="example-element">
    <h2>Element with '<code>contain</code>'</h2>
    <p>
      The Goldfish is a species of domestic fish best known for its bright
      colors and patterns.
    </p>
    <div class="fixed"><p>Fixed right 4px</p></div>
  </div>
</section>

h2 {
  margin-top: 0;
}

#default-example {
  text-align: left;
  padding: 4px;
  font-size: 16px;
}

.card {
  text-align: left;
  border: 3px dotted;
  padding: 20px;
  margin: 10px;
  width: 85%;
  min-height: 150px;
}

.fixed {
  position: fixed;
  border: 3px dotted;
  right: 4px;
  padding: 4px;
  margin: 4px;
}

Синтаксис

/* Keyword values */
contain: none;
contain: strict;
contain: content;
contain: size;
contain: inline-size;
contain: layout;
contain: style;
contain: paint;

/* Multiple keywords */
contain: size paint;
contain: size layout paint;
contain: inline-size layout;

/* Global values */
contain: inherit;
contain: initial;
contain: revert;
contain: revert-layer;
contain: unset;

Значения

Это свойство задаётся одним значением (none, strict или content) либо разделённым пробелами списком из одного или нескольких значений size (или inline-size), layout, style и paint в любом порядке:

none

Элемент отображается обычным образом, без изоляции.

strict

К элементу применяются все правила изоляции. Это эквивалентно contain: size layout paint style.

content

К элементу применяются все правила изоляции, кроме size. Это эквивалентно contain: layout paint style.

size

Изоляция размеров применяется к элементу в строчном и блочном направлениях. Размер элемента можно вычислить независимо, не учитывая дочерние элементы. Это значение нельзя сочетать с inline-size.

inline-size

К элементу применяется изоляция строчного размера. Строчный размер элемента можно вычислить независимо, не учитывая дочерние элементы. Это значение нельзя сочетать с size.

layout

Внутренний макет элемента изолирован от остальной части страницы. Это означает, что ничто за пределами элемента не влияет на его внутренний макет и наоборот.

style

Для свойств, способных влиять не только на элемент и его потомков, эффекты не выходят за пределы содержащего элемента. Область действия счётчиков и кавычек ограничивается элементом и его содержимым.

paint

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

Описание

Существует четыре типа изоляции CSS: размеров, макета, стиля и отрисовки; они задаются для контейнера. Свойство представляет собой разделённый пробелами список, содержащий подмножество из пяти стандартных значений, либо одно из двух сокращённых значений. Изменения изолированных свойств внутри контейнера не передаются за пределы изолированного элемента в остальную часть страницы. Главное преимущество изоляции состоит в том, что браузеру не приходится так часто повторно отображать DOM или макет страницы. Это даёт небольшое повышение производительности при отображении статичных страниц и более заметное — в динамичных приложениях.

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

Формальное определение

Формальный синтаксис

contain = 
  none |
  strict |
  content |
  [ [ size || inline-size ] || layout || style || paint ]

Примеры

Изоляция отрисовки

В следующем примере показано, как использовать contain: paint, чтобы потомки элемента не отрисовывались за его границами.

div {
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
  font-size: 20px;
}

.contain-paint {
  contain: paint;
}

<div class="contain-paint">
  <p>This text will be clipped to the bounds of the box.</p>
</div>
<div>
  <p>This text will not be clipped to the bounds of the box.</p>
</div>

Изоляция макета

Рассмотрим приведённый ниже пример, демонстрирующий поведение элементов с изоляцией макета и без неё:

<div class="card contain-layout">
  <h2>Card 1</h2>
  <div class="fixed"><p>Fixed box 1</p></div>
  <div class="float"><p>Float box 1</p></div>
</div>
<div class="card">
  <h2>Card 2</h2>
  <div class="fixed"><p>Fixed box 2</p></div>
  <div class="float"><p>Float box 2</p></div>
</div>
<div class="card">
  <h2>Card 3</h2>
  <!-- ... -->
</div>

p {
  margin: 4px;
  padding: 4px;
}

h2 {
  margin-bottom: 4px;
  padding: 10px;
}

div {
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 gray;
  padding: 6px;
  margin: 6px;
}

.card {
  width: 70%;
  height: 90px;
}

.fixed {
  position: fixed;
  right: 10px;
  top: 10px;
  background: coral;
}

.float {
  float: left;
  height: 40px;
  margin: 10px;
  background: aquamarine;
}

.contain-layout {
  contain: layout;
}

К первой карточке применена изоляция макета, поэтому её макет изолирован от остальной части страницы. Мы можем повторно использовать эту карточку в других местах страницы, не беспокоясь о перерасчёте макета остальных элементов. Если плавающие элементы перекрывают границы карточки, элементы на остальной части страницы не затрагиваются. Когда браузер пересчитывает поддерево содержащего элемента, пересчитывается только этот элемент. Ничего за пределами изолированного элемента пересчитывать не нужно. Кроме того, фиксированный блок использует карточку как контейнер макета для своего позиционирования.

Вторая и третья карточки не изолированы. Для фиксированного блока во второй карточке контекстом макета является корневой элемент, поэтому фиксированный блок располагается в правом верхнем углу страницы. Плавающий элемент перекрывает границы второй карточки, из-за чего макет третьей карточки неожиданно смещается, что видно по расположению элемента <h2>. При пересчёте он не ограничивается контейнером. Это влияет на производительность и нарушает макет остальной части страницы.

Изоляция стиля

Изоляция стиля ограничивает область действия счётчиков и кавычек изолированным элементом. Для CSS-счётчиков область действия свойств counter-increment и counter-set ограничивается элементом так, как если бы он находился в корне документа.

Изоляция и счётчики

В приведённом ниже примере показано, как работают счётчики при применении изоляции стиля:

<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li class="container">Item C</li>
  <li>Item D</li>
  <li>Item E</li>
</ul>

body {
  counter-reset: list-items;
}

li::before {
  counter-increment: list-items;
  content: counter(list-items) ": ";
}

.container {
  contain: style;
}

Без изоляции счётчик увеличивался бы от 1 до 5 для каждого элемента списка. Изоляция стиля ограничивает область действия свойства counter-increment поддеревом элемента, и счёт начинается заново с 1:

Изоляция и кавычки

Аналогичным образом изоляция влияет на CSS-кавычки: значения content, относящиеся к кавычкам, ограничиваются областью действия элемента:

<!-- With style containment -->
<span class="open-quote">
  outer
  <span class="contain-style">
    <span class="open-quote">inner</span>
  </span>
</span>
<span class="close-quote">close</span>
<br />
<!-- Without containment -->
<span class="open-quote">
  outer
  <span>
    <span class="open-quote">inner</span>
  </span>
</span>
<span class="close-quote">close</span>

body {
  quotes: "[" "]" "‹" "›";
}
.open-quote::before {
  content: open-quote;
}

.close-quote::after {
  content: close-quote;
}

.contain-style {
  contain: style;
}

Из-за изоляции первая закрывающая кавычка игнорирует внутренний span и использует вместо неё закрывающую кавычку внешнего span:

Спецификации

Совместимость с браузерами

См. также

• Изоляция CSS
• Контейнерные запросы CSS
• CSS-свойство content-visibility
• CSS-свойство position