search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.46k stars 657 forks source link

[media-queries-5] Detect all available color schemes #3882

Open AmeliaBR opened 5 years ago

AmeliaBR commented 5 years ago

To really support authors who are trying to handle color schemes correctly, there should be a way to detect the available color schemes for a user agent.

This is particularly important if we allow authors to specifically request color schemes, separate from user preferences (e.g., the only keyword, as discussed in #3881). But it has other uses: for example, if the user setting is no-preference, the spec currently allows a website designer to request dark over light (as discussed in #3850), but it doesn't give the author any way of telling whether that request has been honored.

As @emilio mentioned in https://github.com/w3c/csswg-drafts/issues/3848#issuecomment-485230518, the current forward-compatible definition of color-scheme is contrary to usual CSS practice for handling fallbacks and supports testing. @tabatkins points out that, even without the forward-focused bit, @supports tests are useless for color-scheme, because recognizing a keyword is not the same as having that color scheme available. Even if the user agent has a color scheme available, it might not apply to the current medium (e.g., print).

So, I'd suggest an available-color-scheme media query to complement prefers-color-scheme. It's a media query, not a supports test, because it needs to be assessed specifically for the current media environment. It could factor in user settings beyond a simple preference: e.g., if the website is in a forced-colors dark mode, the only available color scheme should be dark. Or a future web browser might allow users to explicitly say "never dark mode", so that dark only requests cannot be honored. (Or "never light mode", if the user accepts that it might break some websites.)

Complication: we'd need to define a new way of matching media queries, where the media condition is represented by a list of possible keyword values and any of those keywords is considered a true value.

emilio commented 5 years ago

Complication: we'd need to define a new way of matching media queries, where the media condition is represented by a list of possible keyword values and any of those keywords is considered a true value.

Why? I'd expect you should be able to write @media (available-color-scheme: light) or (available-color-scheme: dark), for example.

AmeliaBR commented 5 years ago

I'd expect you should be able to write @media (available-color-scheme: light) or (available-color-scheme: dark)

Yes, that is what I meant. Sorry it wasn't clear. If both light and dark are supported, then both of those queries evaluate to true. We don't currently have any media queries that work that way, with multiple possible keywords being true at the same time.

emilio commented 5 years ago

I don't think that's true, I think any-pointer also acts that way. If you have both a fine and a coarse pointer, both any-pointer: fine and any-pointer: coarse should evaluate to true.

AmeliaBR commented 5 years ago

I don't think that's true, I think any-pointer also acts that way.

Ah, you're right. So, that complication has already been dealt with. And I guess, it isn't really much of a complication anyway. Each condition is assessed independently, there's no API to retrieve all the possibly true values, anyway.