Add `dynamic-range` media query

[Schweinepriester]

https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/

Finally, WebKit includes support for the dynamic-range media query allowing authors to create styles specific to display capabilities.

@media (dynamic-range: standard) {
   .example {
       /* Styles for displays not capable of HDR. */
       color: rgb(255, 0, 0);
   }
}

@media (dynamic-range: high) {
   .example {
       /* Styles for displays capable of HDR. */
       color: color(display-p3 1 0 0);
   }
}

Spec: https://drafts.csswg.org/mediaqueries-4/#dynamic-range

One could argue this is covered by #1069 as dynamic-range is in Media Queries Level 4. However the spec still seems to shift around and dynamic-range is not yet mentioned in the issue.

[argyleink]

I just went searching for dynamic-range under the assumption I'd see Safari lit green for this

[Schweinepriester]

Per https://github.com/w3c/csswg-drafts/issues/5042#issuecomment-634772251 dynamic-range was moved to media queries level 5 (from 4): https://drafts.csswg.org/mediaqueries-5/#dynamic-range

@argyleink Doesn't seem like Chromium has an issue yet (search), want me to open one? :)

(Firefox neither it appears)

[argyleink]

I'll open one if you don't want to!

and here's a test page to open to check support https://codepen.io/argyleink/pen/oNxeWbz (you'll see an icon if HD color is supported)

[Schweinepriester]

I'm happy to and will do shortly (Firefox as well) :)

Cool, nice test page! Could be used for caniuse as well, if/when dynamic-range is added (and not coming via MDN).

For reference what it looks like:

Not supported (e.g. Chrome 89.0.4389.90):

Supported (e.g. Safari TP 123):

[Schweinepriester]

• Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=1194761
• Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1702365

[Schweinepriester]

Shipping in Chrome 98:

• https://blog.chromium.org/2022/01/chrome-98-beta-color-gradient-vector.html#:~:text=High%20Dynamic%20Range,using%20Window.matchMedia().
• https://chromestatus.com/feature/5680926106320896

https://willcassella.github.io/blink-hdr/demos/css-dynamic-range.html (this could be an easier test for caniuse):

[Schweinepriester]

Shipping in Firefox 100: https://github.com/mdn/content/commit/f2ca852bb863bf01440eb9570ff006ad9cfa2f87

---

WPT tests: https://wpt.fyi/results/css/mediaqueries?label=master&label=experimental&aligned&q=dynamic-range

---

Issue for being added to MDN: https://github.com/mdn/content/issues/14405

[Schweinepriester]

Available via MDN now: https://caniuse.com/?search=dynamic-range

• https://caniuse.com/mdn-css_at-rules_media_dynamic-range
• https://caniuse.com/mdn-css_at-rules_media_video-dynamic-range