content-visibility

Это экспериментальная технология

Внимательно проверьте таблицу совместимости браузеров, прежде чем использовать это в производстве.

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

Это позволяет пользовательскому агенту пропускать работу по рендерингу элемента (включая layout и painting) до тех пор, пока он не понадобится, что значительно ускоряет загрузку начальной страницы.

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

Изображения, фильтры, композиция

• image-orientation
• image-rendering
• image-resolution
• object-fit
• object-position

• linear-gradient()
• radial-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()
• conic-gradient()
• repeating-conic-gradient()
• url()
• element()
• image()
• cross-fade()

• backdrop-filter
• filter

• background-blend-mode
• isolation
• mix-blend-mode

• contain
• contain-intrinsic-block-size
• contain-intrinsic-height
• contain-intrinsic-inline-size
• contain-intrinsic-size
• contain-intrinsic-width
• container
• container-name
• container-type
• @container
• content-visibility

Синтаксис

/* Keyword values */
content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;

/* Global values */
content-visibility: inherit;
content-visibility: initial;
content-visibility: revert;
content-visibility: revert-layer;
content-visibility: unset;

Значения

visible

Нет эффекта. Содержимое элемента размещается и отображается как обычно.

hidden

Элемент пропускает свое содержимое. Пропущенное содержимое не должно быть доступно для функций пользовательского агента, таких как поиск на странице, навигация по порядку вкладок и т. д., а также не должно быть доступным для выбора или фокусировки. Это похоже на вывод содержимого display: none.

auto

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

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

• CSS Containment Module Level 2

Комментарии