CSS content-visibility — пропуск рендерингу поза екраном

CSS властивість content-visibility дозволяє браузеру пропускати рендеринг вмісту, який зараз поза екраном.

правити

Загальний опис

На довгій сторінці браузер витрачає час на розкладку геть усього — навіть того, чого користувач ніколи не догортає.

content-visibility: auto каже: «цей блок далеко, не рахуй його зараз». Браузер відкладе роботу до моменту, коли блок наблизиться до екрана. На довгих списках це дає помітне прискорення першого рендеру.

правити

Нотатка

Оскільки браузер не знає розміру нерендереного блока, смуга прокрутки може «стрибати». Щоб цього не було, підкажи очікувану висоту через contain-intrinsic-size.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

content-visibility: visible | hidden | auto;

Властивість content-visibility може отримувати 3 значень:

visible

Вміст рендериться як звичайно.

автор: NagarD

правити

hidden

Вміст пропускається, ніби display: none, але зі збереженим станом.

автор: NagarD

правити

auto

Вміст поза екраном не рендериться, доки не наблизиться до нього.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
content-visibility	85+	125+	18+	71+	85+	-

Підтримка: мобільні переглядачі

Переглядач
content-visibility	85+	yes	yes	18+

Приклади

+ запропонувати свій приклад у пісочниці

<article class="post">Довгий запис 1</article>
<article class="post">Довгий запис 2</article>

.post {
    content-visibility: auto;
    /* підказка про розмір, щоб скролбар не стрибав */
    contain-intrinsic-size: auto 500px;
}