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.
Specification currently under development in a Working Group
Status in Chromium
Enabled by default
Consensus & Standardization
Intent to Prototype urlIntent to Prototype thread
Search tagscontent-visibility, content visibility, display lock, display locking, rendersubtree,
Last updated on 2021-12-13