Awesome
Important Note
The work here has all been adopted in CSSWG or WHATWG as needed. This repo is archived for the historical record.
Display locking
<div style="background: #ffffcc; border: 1px solid #ccc; padding: 20px;"> Note that this feature should not be confused with the <a href="https://github.com/w3c/screen-wake-lock/">Screen Wake Lock API</a>. </div>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
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.
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
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.
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.