HDR CSS MediaQuery

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 to for us to detect the current display device’s support for HDR or not using CSS4's media query!

Current this feature is supported in Safari only and has positve sentiments from the developers.

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 alos reflect on 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 indicated the combination of the User Agent and the output device fulfill all of the following criteria:

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

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 */ 
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!

Feel free to share this article. You may as well ping me on Twitter.

Published