⁣content-visibility: auto: рендер-виртуализация без JS

Браузер по умолчанию считает layout и paint для всей страницы, даже если 80% контента за фолдом. content-visibility: auto говорит: пока элемент не «релевантен пользователю», пропускай style/layout/paint его поддерева. DOM, a11y-дерево и поиск по странице при этом работают - в отличие от content-visibility: hidden.

Но есть цена: у пропущенного элемента нет внутреннего размера, и его block-size схлопывается. Скроллбар прыгает, scrollHeight врёт, anchor-ссылки и scroll-restore уезжают.

Лечится contain-intrinsic-size - placeholder-размер, который подставляется вместо настоящего, пока секция не отрендерена:

.feed > article {
  content-visibility: auto;
  /* 420px - оценка; после первого рендера запомнится реальная высота */
  contain-intrinsic-size: auto 420px;
}

Ключевое слово здесь - auto. Без него placeholder всегда будет тем, что вы написали. С ним браузер запоминает последний отрендеренный размер и дальше использует его как placeholder - при повторном выезде элемента скролл уже не дёргается. Поэтому оценку берите близкой к реальности: от неё зависит длина скроллбара и позиция скролла до первого рендера.

Нужны две оси - используйте две величины (width height) или логические contain-intrinsic-block-size / contain-intrinsic-inline-size.

Где ломается

1. content-visibility: auto неявно включает contain: layout style paint. Элемент становится containing block для absolute/fixed потомков, а overflow обрезается. position: fixed внутри секции перестаёт цепляться к вьюпорту, sticky ведёт себя иначе, выносы отрицательными margin обрезаются.

Claude Code наконец-то завёз поддержку AGENTS.md

Никаких допнастроек: теперь Claude Code по умолчанию первым делом читает AGENTS.md, а если файла нет — подхватывает CLAUDE.md.

Доступно с версии 2.1.277. 💬