css-contain-2 and contain-intrinsic-size

[vmpstr]

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

[foolip]

I have a question in #133 (comment) about how this would add up with the Container Queries proposal and the 2022 containment focus area.

[foolip]

There were two mentions of content-visibility in State of CSS 2022, which was not enough to make the top list in #248, but I'm commenting on all proposals where there's some signal. The comments were "content-visibility in Chrome (breaks a11y tree, reported)" and "content-visibility property".

[foolip]

In the MDN short survey on CSS & HTML, "CSS containment (contain, contain-intrinsic-size, content-visibility)" was selected by ~19% of survey takers, putting it in the middle third of the 20 options. (There is some uncertainty as with any survey data.)

[foolip]

Thank you for proposing css-contain-2 and contain-intrinsic-size for gradients for inclusion in Interop 2023.

We are pleased to let you know that this proposal was accepted as part of the Containment focus area. You can follow the progress of this Focus Area on the Interop 2023 dashboard.

For an overview of our process, see the proposal selection summary. Thank you for contributing to Interop 2023!

Posted on behalf of the Interop team.