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()'.


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.



Specification link

Unknown standards status - check spec link for status

Status in Chromium


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.


Last updated on 2022-01-23