Web developers need strategies to provide HDR content on their web pages without harming the experience for users of non-HDR displays or mixed-HDR multi-display setups as HDR-supported screens become more common.

CSS already has the ‘media query’ notion for toggling rules depending on display device attributes, and this feature adds the ability to identify HDR capability on the current display device.

Soon it should be possible for us to detect the current display device’s support for HDR or not using CSS4’s media query!

Currently this feature is supported in Safari only and has positive sentiments from the developers.

New Media Features

dynamic-range and video-dynamic-range are the new additions which may be either of standard or high in value.

This would help us to toggle the CSS rules accordingly and would also reflect in JavaScript via window.matchMedia() API.

From the spec: dynamic-range represents the combination of max brightness, color depth, and contrast ratio that are supported by the UA and output device.

high Value

high indicates the combination of the User Agent and the output device fulfill all of the following criteria:

• it has a high peak brightness
• it has a high contrast ratio
• its color depth is greater than 24 bit or 8 bit per color component of RGB

standard Value

standard is for when one or more of the criteria for a high dynamic-range is not fulfilled.

video-dynamic-range

video-dynamic-range represents the combination of max brightness, color depth, and contrast ratio that are supported by the UA and output device’s video plane.

Example Queries

@media only screen (dynamic-range: high) {
  /* HDR-only CSS rules */
}

/* detect the current display device's support for HDR. */
@media (dynamic-range: standard) {
  .container {
    /* Styles for displays not capable of HDR. */
    color: rgb(255, 0, 0);
  }
}

@media (dynamic-range: high) {
  .container {
    /* Styles for displays capable of HDR. */
    color: color(display-p3 1 0 0);
  }
}
/* Shipped in Safari only as of now */

## JavaScript Detection
javascript
if (window.matchMedia("dynamic-range: high")) {
  // HDR display
}

With this CSS4 media query we should be able to handle high-dynamic range (HDR) media with ease!