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.

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

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

Comments

@Schweinepriester
Copy link
Contributor

Schweinepriester commented Apr 3, 2020

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

argyleink commented Mar 31, 2021

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

@Schweinepriester
Copy link
Contributor Author

Schweinepriester commented Mar 31, 2021

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

argyleink commented Mar 31, 2021

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

Schweinepriester commented Mar 31, 2021

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 commented Mar 31, 2021

@Schweinepriester
Copy link
Contributor Author

Schweinepriester commented Apr 26, 2022

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants