Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add dynamic-range media query #5341

Open
Schweinepriester opened this issue Apr 3, 2020 · 8 comments
Open

Add dynamic-range media query #5341

Schweinepriester opened this issue Apr 3, 2020 · 8 comments
Labels
Support data suggestion

Comments

@Schweinepriester
Copy link
Contributor

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
Copy link
Contributor

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

@Schweinepriester
Copy link
Contributor Author

Per w3c/csswg-drafts#5042 (comment) 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
Copy link
Contributor

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
Copy link
Contributor Author

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

Bildschirmfoto 2021-04-01 um 00 45 06

Supported (e.g. Safari TP 123):

Bildschirmfoto 2021-04-01 um 00 44 49

@Schweinepriester Schweinepriester changed the title Add dynamic-range media query Add dynamic-range media query Mar 31, 2021
@Schweinepriester
Copy link
Contributor Author

@Schweinepriester
Copy link
Contributor Author

Shipping in Chrome 98:

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

image

@Schweinepriester
Copy link
Contributor Author

Shipping in Firefox 100: mdn/content@f2ca852

image

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

Issue for being added to MDN: mdn/content#14405

@Schweinepriester
Copy link
Contributor Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Support data suggestion
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Fyrd @argyleink @Schweinepriester