Свойство CSS `contain-intrinsic-height`

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

Синтаксис

/* Keyword values */
contain-intrinsic-height: none;

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

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

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

Значения

Для элемента можно указать следующие значения.

none

У элемента нет внутренней высоты.

<length>

У элемента задана указанная высота (<length>).

auto <length>

Запомненное значение высоты элемента при «обычном отображении», если оно есть и элемент пропускает отрисовку своего содержимого (например, когда он находится за пределами области просмотра); в противном случае — указанное значение <length>.

Описание

Это свойство обычно применяется вместе с элементами, которые могут включать ограничение размера, например contain: size и content-visibility. Его также можно задать с помощью contain-intrinsic-size — сокращённого свойства.

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

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

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

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

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

Примеры

Помимо приведённого ниже примера, на странице contain-intrinsic-size есть интерактивный пример, демонстрирующий эффект изменения внутренней ширины и высоты.

Задание внутренней высоты

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

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

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

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

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

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

См. также

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