CSS content-visibility property

Adds a CSS property called content-visibility, which allows automatic or script management of content visibility. When hidden, the element's contents (subtree or replaced element contents) are not drawn or hit-tested and have CSS containment applied, allowing for rendering optimizations. The 'auto' keyword allows for the user-agent to manage content visibility based on proximity to the viewport, whereas 'hidden' keyword allows full script control of content visibility.

Rich content that appears below the fold of the page tends to decrease performance since most aspects of rendering are required for content even if it is off-screen. This can be mitigated to some extent by the developer via virtualization of content, and by the user agent heuristically optimizing away work when possible. Content-visibility property is an easy-to-adopt feature that makes it easy for developers and user agents to to reduce the performance burden of off-screen content.

Documentation

• https://github.com/WICG/display-locking/blob/master/explainers/content-visibility.md
• https://drafts.csswg.org/css-contain-2/#content-visibility

Specification

Working draft or equivalent

Status in Chromium

Blink components: Blink>Paint

Enabled by default (tracking bug) in:

• Chrome for desktop release 85
• Chrome for Android release 85
• Android WebView release 85

Consensus & Standardization

• Firefox: No signal
• Edge: No signal
• Safari: No signal
• Web Developers: Positive

Owners

• vmpstr@chromium.org
• rakina@chromium.org
• chrishtr@chromium.org

Intent to Prototype url

Last updated on 2020-08-10