Codectionary / Developer documentation / CSS

Rendering Containment and content-visibility

contain describes boundaries the browser can rely on when performing layout and painting. content-visibility: auto allows off-screen rendering work to be skipped while keeping content available to find-in-page and accessibility. contain-intrinsic-size supplies a placeholder size when rendering is skipped; measure performance instead of assuming improvement.

Syntax

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

Examples

Rendering Containment and content-visibility: working example

Run this CSS against the example’s own HTML. The explanation describes the expected result.

/* Neutral page for this self-contained document. */
body { color: #182338; background: #fff; }

.chunk { min-height: 70vh; padding: 1rem; border: 1px solid; content-visibility: auto; contain-intrinsic-size: auto 300px; }
  1. Expected result: All sections remain readable while scrolling; supporting browsers may skip rendering work for distant sections.
  2. auto allows the browser to decide when rendering is relevant.
  3. The intrinsic estimate helps reserve space before the section has been laid out; this small example demonstrates syntax rather than a benchmark.
HTML used by this example

<h1>Scroll through the sections</h1><section class="chunk"><h2>First</h2><p>First section content.</p></section><section class="chunk"><h2>Second</h2><p>Second section content.</p></section><section class="chunk"><h2>Third</h2><p>Third section content.</p></section>

Best practices

  • Profile a large realistic page before adopting containment broadly.
  • Avoid paint or size containment where overflowing content or content-based sizing is required.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading