content-visibility
Позволяет браузеру не раскладывать и не рисовать содержимое элемента, пока он за пределами экрана, — дешёвое ускорение длинных страниц.
Синтаксис
content-visibility: auto; contain-intrinsic-size: auto 500px;Значения
| Параметр | Тип | Описание |
|---|---|---|
| visible | keyword | По умолчанию: содержимое отрисовывается всегда. |
| auto | keyword | Содержимое отрисовывается, только когда элемент рядом с экраном; оно остаётся доступным для поиска и экранных дикторов. |
| hidden | keyword | Содержимое не отрисовывается никогда, как `display: none` для внутренностей, но у элемента остаётся рамка, а браузер хранит готовую раскладку. |
Примеры
Разделы длинной статьи отрисовываются по мере приближения к экрану:
<style>
section {
content-visibility: auto;
contain-intrinsic-size: auto 150px;
border-bottom: 1px solid #ccc; padding: 8px;
}
</style>
<section><h3>Part 1</h3><p>Rendered right away, it is on screen.</p></section>
<section><h3>Part 2</h3><p>Rendered when you scroll close to it.</p></section>
<section><h3>Part 3</h3><p>The same.</p></section>Примечания
У пропущенного элемента нечего измерять, поэтому его высота схлопнулась бы до 0, а полоса прокрутки прыгала бы. contain-intrinsic-size задаёт ему размер-заглушку; с auto браузер запоминает настоящий размер после первой отрисовки. Выигрыш заметен только на больших страницах. Поддерживается всеми актуальными браузерами с 2024 года.
См. также
- contain — Обещает браузеру, что элемент не зависит от остальной страницы, поэтому изменения внутри него не заставляют пересчитывать всю страницу.
- visibility — Скрывает элемент, но сохраняет занятое им место.
- display — Определяет, как элемент ведёт себя в потоке и как раскладывает содержимое.
- will-change — Предупреждает браузер, что свойство скоро изменится, чтобы он подготовился заранее.
Вопросы и ответы по теме
В учебнике
- Скорость страницы — Основы быстрой загрузки для HTML и CSS — блокирующий CSS и критические стили, preload и preconnect, размеры картинок, loading=lazy и fetchpriority, content-visibility и contain, сдвиги вёрстки и проверка в Lighthouse.