видимость-содержания

visible

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

hidden

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

auto

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

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

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

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

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

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

content-visibility = 
  visible  |
  auto     |
  hidden   

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

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

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

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

Следующий пример демонстрирует, как управлять видимостью содержимого с помощью 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);
});

Результат

В этом примере у нас есть элемент <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> , чтобы скрыть его содержимое. Затем мы настраиваем @keyframe анимации и привязываем их к классам для отображения и скрытия <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: rgb(0 0 0 / 0%);
  }

  100% {
    content-visibility: visible;
    color: rgb(0 0 0 / 100%);
  }
}

@keyframes hide {
  0% {
    content-visibility: visible;
    color: rgb(0 0 0 / 100%);
  }

  100% {
    content-visibility: hidden;
    color: rgb(0 0 0 / 0%);
  }
}

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[0] === "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)