contain-intrinsic-block-size

Baseline 2023

Newly available

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

Свойство 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>.

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

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

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

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

Примеры

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

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

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

В CSS ниже устанавливается content-visibility для contained_element на 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;
}

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

Спецификация
CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-block-size

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`contain-intrinsic-block-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-block-size