Description

CSS Containment Module, Level 2, specifies the contain and content-visibility
properties. The contain-intrinsic-size property is specified in CSS Sizing Module, Level 4.

The proposal is for the following properties:
content-visibility: hidden value.
content-visibility: auto value.
contain-intrinsic-size css property, supporting all values.

Rationale

CSS Containment Module Level 2 provides performance primitives to help developers
scale their content. Specifically the content-visibility property enables
developers to control how much or how little of their content is rendered:

• content-visibility: hidden allows pages to represent hidden or cached SPA route content in the DOM without paying a rendering cost.
• content-visibility: auto allows pages to avoid rendering cost for content not currently in or near the viewport.

The contain CSS property is a prerequisite for content-visibility, but that is already part of Interop 2022. The contain-intrinsic-size property is important to provide an easy way to reserve placeholder sizing for content-visibility subtrees. It also enables full content-visibility: auto adoption without the need for any script.

When compared to display: none, content-visibility: auto elements have an
added benefit of being searchable by find-in-page, and available to assistive
technologies via the accessibility tree. This further unlocks features such as
hidden=until-found and automatic searchability of content in <details> elements.

Implementor status:

• Blink: css-contain-2, including content-visibility is implemented. Over 4% of page loads use content-visibility, despite it only being available in Blink at the moment.
• WebKit: work ongoing: content-visibility bug / patch list
• Gecko: work ongoing: content-visibility bug / patch list
• Mozilla RFP status: worth prototyping
• Intent to ship for contain-intrisic-size on Gecko.

Community feedback:

Vincent Riemer, React / Meta engineer:

Just did a quick test and boi oh boi — the upcoming content-visibility CSS property has the potential to be one of the biggest performance improvements to SPAs (if properly leveraged) I've seen in a long time.

Addy Osmani, Google engineer:

CSS "content-visibility:auto" is amazing: skip rendering & painting offscreen content until needed. I got a ~1s faster render on a long HTML document on desktop, ~3s on mobile.

Benoit Girard, Databricks engineer, ex-Meta engineer:

Saved over 1 seconds of restyle time on a very large list with 2 lines of CSS using content-visibility, under 1 hour of work

Article:
https://web.dev/content-visibility/

Specification

https://www.w3.org/TR/css-contain-2/
https://www.w3.org/TR/css-sizing-4/

Tests

https://wpt.fyi/results/css/css-contain/content-visibility
https://wpt.fyi/results/css/css-contain
https://wpt.fyi/results/css/css-sizing/contain-intrinsic-size