Свойство CSS `content-visibility`

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

Попробуйте

content-visibility: visible;

content-visibility: hidden;

<section class="default-example" id="default-example">
  <div class="container" id="example-element">
    <div class="child">
      <span>This is an inner div</span>
    </div>
  </div>
</section>

.container {
  width: 140px;
  height: 140px;
  border: 3px solid rgb(64 28 163);
  background-color: rgb(135 136 184);
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  border: 3px solid rgb(64 28 163);
  background-color: wheat;
  color: black;
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}

Синтаксис

/* 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

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

Описание

Анимация и переходы content-visibility

Поддерживающие браузеры анимируют/плавно изменяют content-visibility с использованием варианта дискретного типа анимации.

Дискретная анимация обычно означает, что свойство переключается между двумя значениями на 50% продолжительности анимации. Однако в случае content-visibility браузер переключается между двумя значениями так, чтобы анимируемое содержимое отображалось на протяжении всей анимации. Например:

• При анимации content-visibility от hidden до visible значение переключится на visible в момент 0% продолжительности анимации, чтобы содержимое было видно всё это время.
• При анимации content-visibility от visible до hidden значение переключится на hidden в момент 100% продолжительности анимации, чтобы содержимое было видно всё это время.

Такое поведение удобно для создания анимаций появления и исчезновения, когда, например, нужно удалить содержимое из DOM с помощью content-visibility: hidden, но при этом выполнить плавный переход (например, затухание), а не скрыть его мгновенно.

При анимации content-visibility с помощью переходов CSS для content-visibility необходимо задать transition-behavior: allow-discrete. Это фактически включает переходы content-visibility.

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

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

content-visibility = 
  visible |
  auto |
  hidden

Доступность

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

Поскольку стили содержимого за пределами экрана не отрисовываются, элементы, намеренно скрытые с помощью display: none или visibility: hidden, по-прежнему будут присутствовать в дереве доступности. Если вы не хотите, чтобы элемент присутствовал в дереве доступности, используйте aria-hidden="true".

Примеры

Использование auto для снижения затрат на отрисовку длинных страниц

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

HTML

<section>
  <!-- Content for each section… -->
</section>
<section>
  <!-- Content for each section… -->
</section>
<section>
  <!-- Content for each section… -->
</section>
<!-- … -->

CSS

Свойство contain-intrinsic-size задаёт для высоты и ширины каждого элемента section размер по умолчанию — 500px. После отрисовки раздел сохраняет свой исходный размер в отрисованном виде, даже если его прокрутить за пределы области просмотра.

section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

Использование hidden для управления видимостью

В следующем примере показано, как управлять видимостью содержимого с помощью JavaScript. Использование content-visibility: hidden; вместо display: none; сохраняет состояние отрисовки скрытого содержимого и ускоряет отрисовку.

HTML

<div class="hidden">
  <button class="toggle">Show</button>
  <p>
    This content is initially hidden and can be shown by clicking the button.
  </p>
</div>
<div class="visible">
  <button class="toggle">Hide</button>
  <p>
    This content is initially visible and can be hidden by clicking the button.
  </p>
</div>

CSS

Свойство content-visibility задаётся для абзацев, являющихся непосредственными дочерними элементами элементов с классами visible и hidden. В нашем примере можно показывать и скрывать содержимое абзацев в зависимости от класса CSS родительских элементов div.

Свойство contain-intrinsic-size добавлено для представления размера содержимого. Это помогает уменьшить сдвиг макета при скрытии содержимого.

p {
  contain-intrinsic-size: 0 1.1em;
  border: dotted 2px;
}

.hidden > p {
  content-visibility: hidden;
}

.visible > p {
  content-visibility: visible;
}

JavaScript

const handleClick = (event) => {
  const button = event.target;
  const div = button.parentElement;
  button.textContent = div.classList.contains("visible") ? "Show" : "Hide";
  div.classList.toggle("hidden");
  div.classList.toggle("visible");
};

document.querySelectorAll("button.toggle").forEach((button) => {
  button.addEventListener("click", handleClick);
});

Результат

Анимация content-visibility

В этом примере есть элемент <div>, содержимое которого можно переключать между видимым и скрытым состояниями щелчком мыши или нажатием любой клавиши.

HTML

<p>
  Click anywhere on the screen or press any key to toggle the
  <code>&lt;div&gt;</code> content between hidden and showing.
</p>

<div>
  This is a <code>&lt;div&gt;</code> element that animates between
  <code>content-visibility: hidden;</code>and
  <code>content-visibility: visible;</code>. We've also animated the text color
  to create a smooth animation effect.
</div>

CSS

В CSS мы сначала задаём content-visibility: hidden; для элемента <div>, чтобы скрыть его содержимое. Затем мы настраиваем анимации @keyframes и назначаем их классам, чтобы показывать и скрывать <div>, анимируя content-visibility и color, чтобы при показе и скрытии содержимого анимация была плавной.

div {
  font-size: 1.6rem;
  padding: 20px;
  border: 3px solid red;
  border-radius: 20px;
  width: 480px;

  content-visibility: hidden;
}

/* Animation classes */

.show {
  animation: show 0.7s ease-in forwards;
}

.hide {
  animation: hide 0.7s ease-out forwards;
}

/* Animation keyframes */

@keyframes show {
  0% {
    content-visibility: hidden;
    color: transparent;
  }

  100% {
    content-visibility: visible;
    color: black;
  }
}

@keyframes hide {
  0% {
    content-visibility: visible;
    color: black;
  }

  100% {
    content-visibility: hidden;
    color: transparent;
  }
}

JavaScript

Наконец, с помощью JavaScript мы применяем классы .show и .hide к <div>, чтобы запускать анимации при переключении между видимым и скрытым состояниями.

const divElem = document.querySelector("div");
const htmlElem = document.querySelector(":root");

htmlElem.addEventListener("click", showHide);
document.addEventListener("keydown", showHide);

function showHide() {
  if (divElem.classList.contains("show")) {
    divElem.classList.remove("show");
    divElem.classList.add("hide");
  } else {
    divElem.classList.remove("hide");
    divElem.classList.add("show");
  }
}

Результат

Результат отображения выглядит так:

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

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

См. также

• Изоляция CSS
• contain-intrinsic-size
• contentvisibilityautostatechange
• content-visibility: новое свойство CSS, повышающее производительность отрисовки (web.dev)