⚙️ Что такое content-visibility в CSS и как его использовать?

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

➡️ Пример:

<div class="heavy-content">
  <p>Этот блок загрузится только при появлении в области видимости.</p>
</div>

<style>
  .heavy-content {
    content-visibility: auto; /* Элемент будет рендериться только при появлении в viewport */
    background-color: lightblue;
    padding: 20px;
  }
</style>

🗣️ content-visibility: auto; откладывает рендеринг блока, пока он не попадёт в область видимости пользователя.

🖥 Подробнее тут