Display locking

Note that this feature should not be confused with the Screen Wake Lock API.

Introduction

Display Locking is an umbrella term of related features designed primarily to allow developers to increase performance of their sites. In addition, some of the features in the display locking project enable site behaviors that were not previously easy to accomplish (e.g. searchability in collapsed sections).

This document provides an overview of the features under the Display Locking projects with links that provide additional information.

Features

content-visibility

Summary

content-visibility is a CSS property designed to allow developers and browsers to easily scale to large amount of content and control when rendering work happens.

Status

The feature has been accepted by the CSS Working Group, and is a part of the css-contain-2 module.

The feature is implemented in Chromium M85.

Additional information

• spec
• explainer
• TAG review
• article

hidden=until-found and searchable details elements.

Summary

Leveraging content-visibility, we can also support searchable hidden content. We are applying this automatically to details elements, to make the contents of a details element available to find-in-page.

We are also adding a new attribute hidden=until-found to allow developers to create hidden, but searchable, content.

Status

The searchable details element feature is available in Chromium behind the --enable-blink-features=AutoExpandDetailsElement flag.

• spec PR

hidden=until-found is currently being implemented.

contain-intrinsic-size

Summary

contain-intrinsic-size is a CSS property that allows the developer to specify an intrinsic size to use when size-containment is specified. This enables the developers to specify “placeholder size” on content which is meant to be sized by intrinsic sizing, but has size containment applied to it.

Status

The feature is currently implemented and shipped in Chromium M83.

Additional information

• spec
• explainer
• TAG review
• privacy assessment

renderpriority attribute

Summary

renderpriority (placeholder name) is an HTML attribute that indicates a request from the developer to keep the element and its subtree updated with a certain priority. The User Agent is then responsible for scheduling the updates using the specified priority as a strong hint for prioritizing the work.

Status

This feature is in active development.

• discussion & open questions
• issues

Disclaimer

As the proposed features evolve, several competing API shapes might be considered at the same time, the decisions on particular behaviors might not be finalized, and some documentation may be out of date.

This document was last updated on May 28, 2020.