Использование CSS-содержания

Веб-страницы часто содержат несколько разделов, которые логически независимы друг от друга. CSS-содержание позволяет обращаться к ним как к полностью независимым при рендеринге.

Например, блоги обычно содержат несколько статей, каждая из которых содержит заголовок и контент, как показано в разметке ниже.

<h1>My blog</h1>
<article>
  <h2>Heading of a nice article</h2>
  <p>Content here.</p>
</article>
<article>
  <h2>Another heading of another article</h2>
  <p>More content here.</p>
</article>

В CSS мы применяем свойство contain со значением content к каждой статье. Значение content — это сокращение для contain: layout paint style:

article {
  contain: content;
}

Логически каждая статья независима от других статей на странице. Эта информация обычно известна и, вероятно, очевидна для веб-разработчика, создающего страницу. Однако браузеры не знают намерения вашего контента и не могут предположить, что статья или другой раздел контента будут полностью самодостаточными.

Это свойство предоставляет способ объяснить это браузеру и дать ему явное разрешение на оптимизацию производительности. Оно сообщает браузеру, что внутренняя компоновка элемента полностью отделена от остальной части страницы, и что всё в элементе отрисовывается внутри его границ. Ничто не может визуально выходить за пределы.

Установив contain: content на каждой <article> , мы указали это; мы сказали браузеру, что каждая статья независима. Затем браузер может использовать эту информацию для принятия решений о том, как рендерить каждый <article> контента. Например, он может не рендерить статьи, которые находятся за пределами области просмотра.

Когда дополнительные статьи добавляются в конец страницы, браузеру не нужно пересчитывать компоновку или перерисовывать предыдущий контент; ему также не нужно взаимодействовать ни с какой областью за пределами поддерева содержащего элемента. Однако, если свойства модели области зависят друг от друга, браузеру потребуется пересчитать компоновку и перерисовать. Например, если <article> стилизован таким образом, что его размер зависит от его содержимого (например, с помощью height: auto), тогда браузеру нужно будет учесть изменение его размера.

Существует четыре типа содержаний: компоновка, отрисовка, размер и стиль. Используйте свойство contain, чтобы указать тип или типы, которые вы хотите применить к элементу, включив любую комбинацию этих типов.

Содержимое компоновки

article {
  contain: layout;
}

Компоновка обычно ограничена всей страницей, что означает, что если вы переместите один элемент, вся страница должна обрабатываться так, как будто элементы могли сместиться в любом месте. Используя contain: layout вы можете сказать браузеру, что ему нужно проверить только этот элемент — всё внутри элемента ограничено этим элементом и не влияет на остальную часть страницы, при этом содержащая область определяет независимый форматирующий контекст.

Кроме того:

• float компоновка будет выполняться независимо внутри указанного элемента.
• Отступы не будут сливаться через границу содержательной компоновки.
• Контейнер компоновки является содержащей областью для absolute- и fixed-позиционированных потомков.
• Содержащая область создает контекст стекирования, поэтому z-index может быть использован.

Содержимое отрисовки

article {
  contain: paint;
}

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

Еще одним преимуществом является то, что если элемент с применённым содержанием находится вне экрана, браузер не нуждается в отрисовке его дочерних элементов — они также находятся вне экрана, так как полностью содержатся в этой области.

Содержимое размера

article {
  contain: size;
}

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

Если вы задаете contain: size для элемента, вам необходимо указать размер элемента, используя contain-intrinsic-size, или длинные свойства contain-intrinsic-width и contain-intrinsic-height в этом порядке. Если размер не задан, элемент в большинстве случаев может иметь нулевой размер.

article {
  contain: size;
  contain-intrinsic-size: 100vw auto;
}

Содержимое стиля

article {
  contain: style;
}

Несмотря на название, содержимое стиля не предоставляет изолированных стилей, как вы могли бы получить с теневым DOM или @scope. Основное применение значения style — предотвращение ситуаций, когда счётчик CSS мог быть изменён в элементе, что затем могло повлиять на остальную часть дерева.

Использование contain: style гарантирует, что свойства counter-increment и counter-set создают новые счётчики, ограниченные только этим поддеревом.

Вы можете включить несколько типов содержаний, указав несколько значений через пробел, например, contain: layout paint или используя одно из двух специальных значений.

Специальные значения

Существуют два специальных значения contain , которые являются сокращениями для первых трёх или всех четырёх типов содержаний:

• content
• strict

Мы столкнулись с первым в примере выше. Использование contain: content включает содержимое компоновки, отрисовки и размера. Так как оно исключает содержимое стиля, это безопасное значение для широкого применения.

Объявление contain: strict , которое работает так же, как объявление contain: size layout paint style (включающее четыре значения через пробел), обеспечивает максимальное содержимое. Оно рискованнее в использовании, так как оно включает содержимое стиля; существует риск, что область может оказаться нулевого размера из-за зависимости от размера своих дочерних элементов.

Чтобы избежать этого риска, всегда устанавливайте размер при использовании strict:

article {
  contain: strict;
  contain-intrinsic-size: 80vw auto;
}

Это то же самое, что:

article {
  contain: size layout paint style;
  contain-intrinsic-size: 80vw auto;
}

Когда у вас много контента, который выиграл бы от сильного содержания, которое часто будет вне экрана — например, если все ваши статьи видны на страницах блога как бесконечно прокручиваемый блог — content-visibility: auto может быть использован для одновременного применения всех содержаний.

Свойство content-visibility контролирует, рендерит ли элемент свой контент вообще, а также накладывает строгий набор содержаний, позволяя пользовательским агентам потенциально пропускать большие объёмы работы верстки и отрисовки до тех пор, пока они не понадобятся. Оно позволяет пользовательскому агенту пропускать работу отрисовки элемента (включая верстку и отрисовку) до тех пор, пока она не понадобится — что значительно ускоряет первоначальную загрузку страницы.

Его возможные значения:

• visible: Стандартное поведение — контент элемента верстается и отрисовывается как обычно.
• hidden: Элемент пропускает свой контент. Пропущенный контент не будет доступен для функций пользовательского агента, таких как поиск по странице, навигация по табуляции и т. д., а также не будет выбираемым или фокусируемым.
• auto: Элемент включает содержимое компоновки, содержимое стиля и содержимое отрисовки, как будто было установлено contain: content. Если элемент не актуален для пользователя, он также пропускает свой контент. В отличие от hidden, пропущенный контент по-прежнему доступен для пользовательского взаимодействия, оставаясь фокусируемым, выбираемым, в обычном порядке табуляции и доступным для поиска по контенту.

У агентов пользователя есть понятие о том, что содержимое является соответствующим пользователю. Элемент становится «соответствующим пользователю», если выполняется хотя бы одно из следующих условий:

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

Когда content-visibility: auto установлено, и браузер определяет, что содержимое соответствует пользователю, браузер отобразит это содержимое.

Когда вы устанавливаете content-visibility: hidden на элементе, вы говорите браузеру, что он не важен для пользователя, а значит его содержимое должно быть пропущено и не отображено. Это помогает улучшить производительность.

Браузер также пропустит содержимое элемента, когда content-visibility: auto установлено на нём, и браузер определяет, что его содержимое не соответствует пользователю.

Когда элемент пропускает своё содержимое:

• Для него включены компоновка, стиль, отрисовка и размер.
• Его содержимое не отрисовывается, как если бы visibility: hidden было установлено на нём.
• Его содержимое не получает событий взаимодействия с указателем, как если бы pointer-events: none было установлено на нём.

Это происходит в обоих упомянутых случаях, но при content-visibility: auto содержимое можно искать, получать фокус и иначе переходить из состояния «не важное» в «важное». Это не так для content-visibility: hidden.

• Модуль CSS containment
• Обучение: оптимизация производительности CSS
• CSS container queries
• Введение в CSS Containment от Igalia.com (2019)
• Событие contentvisibilityautostatechange