contain-intrinsic-size

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

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

Для свойства 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}  

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

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

После того, как браузер получит фактическую информацию о размере элемента, он запомнит этот размер, когда элемент снова скроется вне экрана, и использует запомненный размер для расчётов макета вместо значения placeholder. Преимущество заключается в том, что браузеру не нужно повторно рендерить содержимое элемента для расчёта его размера, что особенно полезно, когда содержимое сложное или зависит от сетевых ресурсов или 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

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 containment
• Модуль CSS containment
• content-visibility: новое свойство CSS, которое повышает производительность отрисовки via web.dev (2020)