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

Свойство contain-intrinsic-width CSS задаёт ширину элемента, которую браузер будет использовать при компоновке, если к элементу применяется изоляция размера.

Синтаксис

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

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

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

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

Значения

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

none

Элемент не имеет внутренней ширины.

<length>

Элемент имеет заданную ширину (<length>).

auto <length>

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

Описание

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

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

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

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

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

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

Примеры

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

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

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

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

Приведённый ниже CSS-код задаёт для contained_element свойство content-visibility со значением auto, поэтому при скрытии элемента его размер будет ограничен. Ширина и высота, используемые при ограничении размера, задаются одновременно с помощью 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-height
• contain-intrinsic-block-size
• contain-intrinsic-inline-size