Свойство CSS `contain-intrinsic-block-size`

contain-intrinsic-block-size — это логическое свойство CSS, которое задаёт размер элемента по блочной оси, используемый браузером при раскладке, если для элемента применяется изоляция размера.

Размер по блочной оси — это размер элемента в направлении, перпендикулярном потоку текста в строке. В горизонтальном режиме письма, например в стандартном английском тексте, размер по блочной оси соответствует вертикальному измерению (высоте); в вертикальном режиме письма — горизонтальному.

Синтаксис

/* Keyword values */
contain-intrinsic-block-size: none;

/* <length> values */
contain-intrinsic-block-size: 1000px;
contain-intrinsic-block-size: 10rem;

/* auto <length> */
contain-intrinsic-block-size: auto 300px;

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

Значения

Для внутреннего размера элемента по блочной оси можно указать следующие значения:

none

У элемента нет внутреннего размера по блочной оси.

<length>

Элемент имеет указанный размер по блочной оси, заданный с помощью типа данных (<length>).

auto <length>

Если для элемента применяется изоляция размера и его содержимое пропускается (например, если он находится за пределами области просмотра, а свойству content-visibility: auto задано значение), размер по блочной оси сохраняет значение фактического размера элемента при последней отрисовке его дочерних элементов. Если дочерние элементы элемента ещё ни разу не отрисовывались и поэтому для обычного размера элемента нет сохранённого значения или если содержимое не пропускается, размером по блочной оси будет указанное значение <length>.

Описание

Это свойство обычно применяется вместе со свойствами, которые могут включать изоляцию размера, например contain: size и content-visibility.

Изоляция размера позволяет пользовательскому агенту выполнять раскладку элемента так, как если бы он имел фиксированный размер. Это позволяет избежать ненужной повторной раскладки, поскольку дочерние элементы не приходится отрисовывать заново для определения фактического размера (что улучшает пользовательский интерфейс). По умолчанию при изоляции размера элементы рассматриваются так, будто у них нет содержимого, из-за чего раскладка может схлопнуться так же, как если бы содержимое не имело ширины или высоты. Свойство contain-intrinsic-block-size позволяет авторам указать подходящее значение размера по блочной оси для раскладки.

Значение auto <length> позволяет сохранить размер элемента по блочной оси, если он когда-либо был «отрисован обычным образом» (вместе с дочерними элементами), и затем использовать его вместо указанного значения, когда у элемента нет содержимого. Благодаря этому расположенные за пределами области просмотра элементы с content-visibility: auto могут использовать изоляцию размера, и разработчикам не нужно точно оценивать размер элемента. Сохранённое значение не используется, если дочерние элементы отрисовываются; если включена изоляция размера, используется значение <length>.

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

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

contain-intrinsic-block-size = 
  auto? [ none | <length> ]

Примеры

Задание внутреннего размера по блочной оси

В приведённом ниже HTML задан элемент «contained_element», для которого будет применяться ограничение размера и который содержит дочерний элемент.

<div id="contained_element">
  <div class="child_element"></div>
</div>

Приведённый ниже CSS задаёт для contained_element свойство content-visibility со значением auto, поэтому при скрытии элемента его размер будет ограничен. Внутренние размеры по блочной и строчной осям, используемые при ограничении размера, задаются одновременно с помощью contain-intrinsic-block-size и contain-intrinsic-inline-size соответственно.

#contained_element {
  border: 2px solid green;
  inline-size: 151px;
  content-visibility: auto;
  contain-intrinsic-inline-size: 152px;
  contain-intrinsic-block-size: 52px;
}
.child_element {
  border: 1px solid red;
  background: blue;
  block-size: 50px;
  inline-size: 150px;
}

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

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

См. также

• content-visibility: новое свойство CSS, повышающее производительность отрисовки (web.dev)
• contain-intrinsic-inline-size
• contain-intrinsic-size
• contain-intrinsic-width
• contain-intrinsic-height