Why content-visibility Often Needs contain-intrinsic-size

content-visibility: auto lets the browser skip rendering some off-screen content. contain-intrinsic-size supplies an estimated size for that content, so the surrounding layout has space for it before the real dimensions are available.

That is the part I find useful: postponing work should not leave the browser with a wildly inaccurate picture of the page’s length. The estimate does not need to be exact, but it should reflect the content it represents.

Pair contain-intrinsic-size with skipped content

For sections of a long article, the two declarations can sit together:

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

The content-visibility rule lets the browser skip rendering when a section is not relevant to the user. The intrinsic-size override supplies a fallback for the contents’ size while they are skipped.

Here, 500px is an illustrative estimate, not a measurement. The auto keyword allows a normally rendered size to be remembered and used on later visits to a skipped state.

For the rendering side of the technique, see where content-visibility can help on long pages. The sizing property solves the narrower problem of reserving space while that work waits.

A placeholder affects the scrollbar too

A skipped section without a useful size estimate can contribute much less space than its content eventually needs. As the section renders, the document’s length and scrollbar can adjust.

The CSS sizing specification defines the override as a replacement for the contents’ intrinsic size under size containment. It is not a fixed height that continues to constrain the section when its contents render normally.

The analogy with reserving image space is helpful. Image width and height attributes let the browser establish an aspect ratio before an image loads; an intrinsic-size estimate gives skipped content provisional geometry. The estimate is less precise because an article section can have a very different height at another width.

Let auto replace the estimate with a remembered size

The difference between a fixed estimate and the paired form matters when the reader scrolls back through the page:

A remembered value reduces dependence on the original guess. It still cannot predict content that changes before the browser has laid out the new version.

Check sections containing expandable examples or images that arrive later. The useful question is whether the page remains comfortable to scroll through after those changes, as well as on its first render.

Choose an estimate from the actual sections

For an article whose sections are generally around 30rem to 50rem tall, 40rem could be a reasonable starting estimate. Those numbers describe a hypothetical page; they are not a recommended scale for every article.

Look at real headings, paragraphs, and code examples at the widths the page uses. An estimate based on a wide desktop view may fit poorly after the text wraps on a phone.

A section expected to be roughly 1000px tall is poorly represented by 100px. An oversized estimate creates the opposite mismatch. Neither becomes accurate simply because the browser can remember a better size later.

Choose the dimension you actually need

The shorthand accepts width and height estimates. One length, or one auto <length> pair, applies to both dimensions; two values describe width first, then height.

For ordinary horizontal writing, a vertical article usually needs a block-size estimate. The logical block-size property targets that dimension directly:

.article-section {
  content-visibility: auto;
  contain-intrinsic-block-size: auto 40rem;
}

This version can replace the earlier shorthand example when only the block dimension needs an override. The corresponding longhands include contain-intrinsic-width, contain-intrinsic-height, and contain-intrinsic-inline-size.

I would choose the logical longhand when it makes the intent clearer. The shorthand is still reasonable when both dimensions belong to the same sizing rule.

Use a separate estimate for a different component

A product card and an article section need not share a placeholder size:

.product-card {
  content-visibility: auto;
  contain-intrinsic-block-size: auto 22rem;
}

The 22rem value is another example to replace with an estimate from the actual cards. Product names, image proportions, and extra controls all affect how much room the content needs.

A large list may provide enough rendering work to make the technique useful. A small list does not justify it merely because the declarations are available.

Reserve space where containment makes it relevant

contain-intrinsic-size does not itself enable skipped rendering or size containment. Its override matters when another rule establishes that sizing context, as the property’s description explains.

For content-visibility: auto, that means supplying geometry for the skipped state. Adding an estimate by itself is not evidence that a page will render faster.

Compare the page with and without the rendering change, using the same content and viewport. Include scrolling back through rendered sections, and try a slower device or consistent CPU throttling if the difference is hard to observe.

Keep the estimate when it supports a useful rendering improvement and stable page geometry. If the page already renders promptly, leaving both declarations out is a reasonable choice.

← Back to all articles