Defer rendering of off-screen content

Configure a long section to skip currently irrelevant content.

Official sourceW3C CSS Containment — content-visibility and intrinsic sizeReviewed: 2026-08-26

STEP 1 · LEARN

How it works

content-visibility: auto lets the browser skip content when it is not relevant to the user. contain-intrinsic-size supplies a fallback size to reduce layout shifts; the real effect must be measured rather than assumed.

Correct example

.feed-section { content-visibility: auto; contain-intrinsic-size: auto 500px; }

The section can temporarily skip internal rendering while keeping a 500px estimate.

Common mistake

.feed-section { display: none; }

display: none removes content from rendering and layout and is not the same optimisation.

STEP 2 · APPLY

Your exercise

Set .feed-section to content-visibility: auto and contain-intrinsic-size: auto 500px.

index.htmlCSS

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

The section uses content-visibility: auto.
The fallback intrinsic size is auto 500px.
The target element is present in the page.

Explain the solution logic

The first property controls rendering skips, while the second reduces instability when content becomes relevant.

How it works

Your exercise

Write and see the result

What needs to pass