Перейти к содержанию

content-visibility

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

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

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

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

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

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

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/* 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

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

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

Комментарии