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.

Motivation

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

Specification

Specification link


Specification currently under development in a Working Group

Status in Chromium

Blink>Paint


Enabled by default (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owners

Intent to Prototype url

Intent to Prototype thread

Search tags

content-visibility, content visibility, display lock, display locking, rendersubtree,

Last updated on 2021-05-09