Lazy rendering without IntersectionObserver
The old way used JavaScript's IntersectionObserver to detect when elements entered the viewport, then loaded or rendered them. Now CSS handles it with content-visibility: auto.
2const observer = new IntersectionObserver(
3 (entries) => {
4 entries.forEach(entry => {
5 if (entry.isIntersecting) {
6 renderContent(entry.target);
7 }
8 });
9 }
10);
2 content-visibility: auto;
3 contain-intrinsic-size: auto 500px;
4}
Faster page loads
The browser skips layout and paint for offscreen content. Pages with long lists render significantly faster.
No JavaScript needed
IntersectionObserver requires setup code, callbacks, and cleanup. This is two CSS properties.
Automatic size estimation
The auto keyword in contain-intrinsic-size remembers the real size after first render, so scrollbar height stays accurate.
How it works
The old approach used JavaScript's IntersectionObserver API to watch elements as they scrolled into view. When an element crossed the viewport threshold, a callback would trigger rendering or loading. This required setup, teardown, and careful management of observer instances across the page.
With content-visibility: auto, the browser handles all of that internally. Offscreen content gets skipped during layout and paint, and contain-intrinsic-size provides a placeholder height so the scrollbar stays stable. When the user scrolls near the content, the browser renders it automatically.