CSS dynamic-range-limit property

Category: Graphics
Type: New or changed feature
Status: Enabled by default (Chrome 136)
Intent stage: Start incubating

Breaking change: No
Enterprise impact: None
Chromium flag: Experimental web platform features
Spec maturity: Working draft
Web Platform Tests: Yes

WPT details: Extensive tests of CSS properties in wpt/css/css-color-hdr. Full end-to-end testing requires observation on an HDR display. There does not yet exist a way to test high dynamic ranger (or wide color gamut) rendering: https://github.com/web-platform-tests/wpt/issues/44320

Summary

Enables a page to limit the maximum brightness of HDR content.

Motivation

Several applications that show galleries of images and videos have indicated that, when there is a mix of high dynamic range (HDR) and standard dynamic range (SDR) content in a gallery view, the contrast between the brightnesses of the content can be jarring. They would prefer that the HDR images be limited in their brightness when in the gallery, and only expanded on demand (e.g, when hovered, clicked on, etc). This CSS property enables this behavior. It also mirrors existing and in-development native APIs.

Standards & signals

Specification: https://drafts.csswg.org/css-color-hdr/#controlling-dynamic-range
Firefox: No signal
Safari: No signal — WebKit engineers have expressed positive views of this proposal (it is similar to features available on macOS and iOS).
Web developers: Positive — Adobe has endorsed this proposal. Internal developers at Google have also requested this proposal.
Tracking bug: https://crbug.com/1470298

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=wpt%2Fcss%2Fcss-color-hdr
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+CSS%20dynamic-range-limit%20property
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=CSS%20dynamic-range-limit%20property
Baseline status: https://webstatus.dev/?q=CSS%20dynamic-range-limit%20property

Samples: https://ccameron-chromium.github.io/hdr-headroom-limit/example.html

Explainers: https://github.com/ccameron-chromium/hdr-headroom-limit/blob/main/EXPLAINER.md

View on chromestatus.com