← Back to release summary

CSS content-visibility property

Category
CSS
Type
New or changed feature
Status
Enabled by default (Chrome 85)
Intent stage
Shipped

Summary

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.

Standards & signals

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

Explainers: https://github.com/WICG/display-locking/blob/master/explainers/content-visibility.md

View on chromestatus.com