Adds a media query to CSS which allows a page to detect the current display device’s support for HDR. This feature adds the query: 'dynamic-range' which may be one of 'standard' or 'high'. Chrome will resolve this query according to the capabilities of the display device the browser window is currently positioned on, allowing pages to toggle CSS rules accordingly or respond in Javascript via 'window.matchMedia()'.

Motivation

As HDR-supported displays become more common, web developers need ways to enable HDR content on their web pages without compromising the experience for users of non-HDR displays, or mixed-HDR multi-display setups. CSS already provides the 'media query' concept for toggling rules based on display device characteristics, and this feature extends that set of queries to enable detecting HDR support on the current display device.

Demo

Specification

Specification link


Unknown standards status - check spec link for status

Status in Chromium

Blink>CSS


In developer trial (Behind a flag) (tracking bug)

Consensus & Standardization

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

Owners

Last updated on 2022-01-23