Caniuse: 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