содержимое

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

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

Свойство contain может иметь любое из следующих значений:

• Ключевое слово none или
• Одно или несколько ключевых слов, разделенных пробелами, size (или inline-size), layout, style, и paint в любом порядке или
• Одно из значений-сокращений strict или content

Ключевые слова имеют следующие значения:

none

Элемент отображается как обычно, без применения контейнирования.

strict

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

content

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

size

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

inline-size

Применяется контейнирование размера inline к элементу. Размер inline элемента можно вычислить изолированно, игнорируя дочерние элементы. Это значение нельзя комбинировать с size.

layout

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

style

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

paint

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

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

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

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

<div style="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" style="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>

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

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

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

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

У второй и третьей карточек контейнирование отсутствует. Контекст макета для фиксированной области во второй карточке — это корневой элемент, поэтому фиксированная область расположена в верхнем правом углу страницы. Флотовый элемент перекрывает границы второй карточки, что приводит к неожиданному сдвигу макета третьей карточки, который виден в позиционировании элемента <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 style="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;
}

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

• CSS containment
• CSS container queries
• Свойство CSS content-visibility
• Свойство CSS position