CSS content-visibility: skip offscreen rendering carefully

How the rule works

A long archive page may contain dozens of independent case summaries. Applying the rule to each summary can reduce initial rendering work without deleting the summaries from the document. Choose a placeholder block size close to the observed section height; an unreasonable estimate can shift the page when the section becomes visible. The feature does not replace pagination, server filtering, or image delivery strategy. Keep the headings and content in markup and test fragment navigation into an offscreen section. Do not apply it indiscriminately to a hero, a currently focused region, or content whose height changes wildly. Measure the page with and without the rule before keeping it.

.archive-summary {
  content-visibility: auto;
  contain-intrinsic-size: auto 24rem;
  border-block-end: 1px solid #c6d0da;
}

Cost and verification

The potential win is less offscreen render work, especially for a large document. The cost is the placeholder estimate and a new source of scroll-position shifts if the estimate is poor. It may also change how layout-dependent scripts observe offscreen content, so test application integrations rather than assuming computed geometry is immediately available. Browser support and actual gains depend on the page. Collect a performance profile and a layout-shift check with realistic archive lengths; do not use this as a substitute for reducing unnecessary DOM and payload size.

Common Mistakes

• Do not treat content-visibility as a security boundary.
• Do not set a placeholder size from one short sample section.
• Do not claim a performance gain without measuring the actual page.

Connected lessons

• CSS Layout
• CSS overflow: contain long data without losing controls
• CSS intrinsic sizing: let content set limits without forcing overflow
• CSS receipt dashboard project: one layout across cards, rails, and zoom

Related behavior

• CSS contain: isolate work without cutting off content