Adds media queries to CSS which allow a page to detect the current display device’s support for HDR. This feature adds two new CSS media queries: 'dynamic-range' and 'video-dynamic-range', both of which may be one of 'standard' or 'high'. Chrome will resolve these queries 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.

  • No signal
  • No signal
  • No signal
  • No signals


Last updated on 2021-09-22