contain-intrinsic-inline-size

Базовая 2023

Новое

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

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

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

Синтаксис

/* 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;

Значения

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

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

Описание

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

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

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

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

Начальное значение	`none`
Применимо к	элементам, к которым может применяться ограничение размера
Наследуется	нет
Вычисленное значение	как указано, с вычисленными значениями <length>
Тип анимации	по типу вычисленного значения

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

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

Примеры

Установка внутреннего размера inline

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

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

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

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

Спецификация
CSS Модуль размера блока уровня 4 # propdef-contain-intrinsic-inline-size

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`contain-intrinsic-inline-size`	95	95	107	81	17	95	107	67	17	17.0	95
`none`	98	98	107	84	17	98	107	68	17	18.0	98

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-inline-size