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

contain-intrinsic-inline-size — логическое свойство CSS, которое определяет размер элемента по строчной оси. Браузер может использовать это значение при компоновке, если для элемента применяется ограничение размера.

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

Синтаксис

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

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

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

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

Значения

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

none

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

<length>

Элемент имеет указанный размер по строчной оси (<length>).

auto <length>

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

Описание

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

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

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

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

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

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

Примеры

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

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

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

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