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

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

Составные свойства

Это сокращённое свойство для следующих свойств CSS:

• contain-intrinsic-width
• contain-intrinsic-height

Синтаксис

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

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

/* width | height */
contain-intrinsic-size: 1000px 1.5em;

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

/* auto width | auto height */
contain-intrinsic-size: auto 300px auto 4rem;

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

Значения

Для свойства contain-intrinsic-size можно указать следующие значения:

none

У элемента нет внутреннего размера в заданном измерении (измерениях).

<length>

Элемент имеет заданную <length> в указанном измерении (измерениях).

auto [<length> | none]

Запомненное значение размера элемента при его обычном отображении, если оно существует и элемент пропускает отрисовку своего содержимого (например, когда находится за пределами экрана); в противном случае — заданное значение <length>. Ключевое слово none можно использовать вместо <length>, когда фиксированные значения 0px ведут себя иначе, чем none (например, при многоколоночной или сеточной компоновке).

Если указано одно значение — ключевое слово, длина или пара auto [<length> | none], — оно применяется и к ширине, и к высоте.

Можно указать два значения длины, которые применяются соответственно к ширине и высоте. Если указаны две пары auto [<length> | none], первая пара применяется к ширине, а вторая — к высоте.

Описание

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

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

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

В сеточной и многоколоночной компоновке явный размер обрабатывается иначе, чем неявная высота, зависящая от содержимого. Элементы могут располагаться совершенно иначе, чем если бы их просто заполнили содержимым до этой высоты. Значение auto none позволяет элементу использовать contain-intrinsic-size: none, если сохранённого значения нет, благодаря чему элемент будет размещён так, будто у него нет содержимого. Это почти всегда предпочтительнее, чем задавать 0px в качестве внутреннего размера в сеточной и многоколоночной компоновке, где изолированные элементы могут выходить за пределы родительских элементов и приводить к неожиданной компоновке страницы.

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

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

contain-intrinsic-size = 
  [ auto? [ none | <length> ] ]{1,2}

Примеры

Использование пар значений auto для внутреннего размера

В этом примере показано contain-intrinsic-size: auto <length> и contain-intrinsic-size: auto none на примере компоновки с множеством вертикально расположенных элементов, для которых заданы как точные, так и ошибочные оценки внутреннего размера. Использование content-visibility: auto позволяет пропускать отображение элементов, находящихся за пределами экрана, поэтому это свойство хорошо сочетается с contain-intrinsic-size, помогая повысить производительность отображения и свести к минимуму перекомпоновки.

Пара значений contain-intrinsic-size: auto 500px указывает браузеру использовать 500px в качестве условного размера-заполнителя (ширины и высоты) элемента, когда он находится за пределами экрана и выполняется компоновка страницы. Когда пользователь прокручивает страницу до этого элемента и его нужно отобразить, браузер вычисляет фактический размер элемента и его содержимого. Если размер заполнителя отличается от вычисленного размера, может потребоваться новая компоновка, что приведёт к изменению положения боковой панели.

Получив данные о фактическом размере элемента, браузер запомнит его, когда элемент снова окажется за пределами экрана, и будет использовать запомненный размер при вычислениях компоновки вместо значения-заполнителя. Это позволяет браузеру не отображать содержимое элемента повторно для вычисления его размера. Такой подход особенно полезен, если содержимое сложное или зависит от сетевых ресурсов либо JavaScript.

HTML

<div id="container">
  <div id="auto-length-note">
    <p>
      Your browser does not support
      <code>contain-intrinsic-size: auto &lt;length&gt;</code>.
    </p>
  </div>
  <div class="auto-length">
    <p>Item one</p>
  </div>
  <div class="auto-length">
    <p>Item two</p>
  </div>
  <div class="auto-length large-intrinsic-size">
    <p class="small">Item three</p>
  </div>
  <div class="auto-length large-intrinsic-size">
    <p class="small">Item four</p>
  </div>
  <div id="auto-none-note">
    <p>
      Your browser does not support
      <code>contain-intrinsic-size: auto none</code>.
    </p>
  </div>
  <div class="auto-length none">
    <p>Item five</p>
  </div>
  <div class="auto-length none">
    <p>Item six</p>
  </div>
</div>

CSS

div,
p {
  padding: 1rem;
  margin-bottom: 1rem;
  font-size: 2rem;
  font-family: sans-serif;
}

code {
  background-color: lightgray;
  padding: 0.25rem;
  border-radius: 0.25rem;
}

#container {
  width: 90%;
  height: 80%;
}

.auto-length,
.auto-length.none {
  display: none;
}

#auto-length-note,
#auto-none-note {
  display: block;
  padding: 0;
}

#auto-length-note p,
#auto-none-note p {
  padding: 0.5rem;
  width: 100%;
  height: max-content;
  font-size: 1rem;
  line-height: 1.5rem;
  background-color: tomato;
}

@supports (contain-intrinsic-size: auto none) {
  .auto-length.none {
    display: block;
  }
  #auto-none-note {
    display: none;
  }
}
@supports (contain-intrinsic-size: auto 500px) {
  .auto-length {
    display: block;
  }
  #auto-length-note {
    display: none;
  }
}

p {
  height: 500px;
  width: 500px;
  border: 4px dotted;
  background: lightblue;
}

.auto-length {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
  background-color: linen;
  outline: 4px dotted blue;
}

.large-intrinsic-size {
  /* Setting an inaccurate intrinsic size for the element */
  contain-intrinsic-size: auto 5000px;
  background-color: lightgray;
  outline: 4px dotted red;
}

.small {
  /* This element is a lot smaller than expected */
  height: 100px;
  width: 100px;
}

.none {
  background-color: papayawhip;
  contain-intrinsic-size: auto none;
  outline: 4px dotted red;
}

Результат

• Первые два блока имеют внутренний размер, соответствующий их фактическому размеру, поэтому при появлении в области просмотра компоновка пересчитывается, но положение полосы прокрутки и прокрутки не меняется.

• Третий и четвёртый блоки имеют очень большой внутренний размер, поэтому первоначальная компоновка, вычисленная браузером, слишком велика. Мы уменьшили эти блоки, чтобы было наглядно видно момент, когда происходит резкое изменение компоновки.

  Когда третий и четвёртый блоки появляются в области просмотра, их размер пересчитывается, и блок вместе с родительским элементом становится ниже. В результате область прокрутки скачком перемещается вниз по странице (фактически мы прокрутили блок дальше, чем предполагалось), а сама полоса прокрутки становится длиннее, поскольку вся страница ниже, чем предполагалось.

• Последние блоки имеют auto none, поэтому их оценочный размер равен нулю. Когда они появляются в области просмотра, размер элемента и его родителя пересчитывается и становится значительно больше, поэтому полоса прокрутки уменьшается и перемещается вверх.

После прокрутки до самого низа можно плавно прокручивать страницу вверх и вниз: использование content-visibility: auto сохраняет фактический отображённый размер элемента для следующего показа.

Задание внутреннего размера

В этом примере представлены списки выбора, с помощью которых можно изменить contain-intrinsic-size, content-visibility и contain элемента, чтобы увидеть эффект от разных настроек.

CSS

#contained_element {
  border: 2px solid green;
  width: 120px;
}
.child_element {
  border: 1px solid red;
  background: blue;
  height: 50px;
  width: 150px;
}

JavaScript

Приведённый ниже код добавляет стили к содержащему элементу и удаляет их в зависимости от выбранных параметров.

const containedElement = document.querySelector("#contained_element");
const intrinsicSizeSelector = document.querySelector(
  "#contain_intrinsic_size_selector",
);
const containSelector = document.querySelector("#contain_selector");
const contentVisibilitySelector = document.querySelector(
  "#content_visibility_selector",
);

containedElement.style["contain-intrinsic-size"] =
  intrinsicSizeSelector.options[intrinsicSizeSelector.selectedIndex].text;
containedElement.style["contain"] =
  containSelector.options[containSelector.selectedIndex].text;
containedElement.style["content-visibility"] =
  contentVisibilitySelector.options[
    contentVisibilitySelector.selectedIndex
  ].text;

intrinsicSizeSelector.addEventListener("change", () => {
  containedElement.style["contain-intrinsic-size"] =
    intrinsicSizeSelector.options[intrinsicSizeSelector.selectedIndex].text;
});

containSelector.addEventListener("change", () => {
  containedElement.style["contain"] =
    containSelector.options[containSelector.selectedIndex].text;
});

contentVisibilitySelector.addEventListener("change", () => {
  containedElement.style["content-visibility"] =
    contentVisibilitySelector.options[
      contentVisibilitySelector.selectedIndex
    ].text;
});

HTML

В HTML определены две кнопки и контейнер, к которому применяется изоляция с помощью свойства content-visibility.

<p>
  <label for="contain_intrinsic_size_selector">contain-intrinsic-size:</label>
  <select id="contain_intrinsic_size_selector">
    <option>none</option>
    <option>40px 130px</option>
    <option>auto 40px auto 130px</option></select
  >;<br />

  <label for="contain_selector">contain:</label>
  <select id="contain_selector">
    <option>none</option>
    <option>size</option>
    <option>strict</option></select
  >;<br />

  <label for="content_visibility_selector">content-visibility:</label>
  <select id="content_visibility_selector">
    <option>visible</option>
    <option>auto</option>
    <option>hidden</option></select
  >;
</p>

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

Результат

Используйте селекторы, чтобы применить указанные стили к содержащему элементу div. Обратите внимание: если content-visibility имеет значение visible или auto, изменение contain-intrinsic-size ни на что не влияет. Однако если содержимое скрыто, значение contain-intrinsic-size, равное none, схлопывает родительский элемент так, будто дочерний элемент не имеет размера.

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

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

См. также

• contain-intrinsic-block-size
• contain-intrinsic-inline-size
• Использование изоляции CSS
• Модуль изоляции CSS
• content-visibility на web.dev (2020)