Re: [csswg-drafts] [mediaqueries] Effect of <meta name=color-scheme> on the (prefers-color-scheme) MQ (#10249)

The CSS Working Group just discussed `[mediaqueries] Effect of <meta name=color-scheme> on the (prefers-color-scheme) MQ`.

<details><summary>The full IRC log of that discussion</summary>
&lt;matthieud> TabAtkins:  Dark mode and spec is weird : when the meta makes the page dark, it is not reflected in the value of the media query<br>
&lt;matthieud> TabAtkins: proposition we allow the meta name color-scheme to define the value of the prefers-color-scheme MQ<br>
&lt;matthieud> TabAtkins:  Uniflow imformation from page to the CSS ; it' s similar to how the viewport meta affect the size MQ on the page<br>
&lt;emilio> q+<br>
&lt;astearns> ack emilio<br>
&lt;matthieud> emilio: It makes sense. If someone does the opposite (set the meta from the value of the MQ?) no reason to do that though<br>
&lt;joshtumath> q+<br>
&lt;matthieud> TabAtkins:  no reason to do that (set meta from MQ)<br>
&lt;astearns> ack joshtumath<br>
&lt;matthieud> joshtumath:  How this work with color-scheme property ?<br>
&lt;matthieud> TabAtkins:  It still has no effect of the result of the prefer-color-scheme MQ<br>
&lt;astearns> ack fantasai<br>
&lt;matthieud> fantasai: Currently the color-scheme meta is just setting the color-scheme property. But now it would have a new behavior (affecting the MQ)<br>
&lt;matthieud> TabAtkins:  it makes more sense than having MQ giving the result of the OS<br>
&lt;emilio> q+<br>
&lt;matthieud> fantasai: But setting color-scheme property on the root doesnt affect the MQ<br>
&lt;matthieud> TabAtkins:  Nobody expecty properties to affect MQ, but it' s more reasonable for the HTML (like meta)  to affect the MQ<br>
&lt;astearns> ack emilio<br>
&lt;fantasai> TabAtkins: If I set color-schemen, I get dark controls, but prefers-color-scheme doesn't reflect, so that's confusing<br>
&lt;matthieud> emilio:  Do we have data on the usage of this ?<br>
&lt;joshtumath> q+<br>
&lt;fantasai> fantasai: But if you set color-scheme property on the root, you also get dark controls, and prefers-color-scheme doesn't reflect there either<br>
&lt;matthieud> TabAtkins: anecdotal I got bit by this behavior already<br>
&lt;miriam> q+<br>
&lt;astearns> ack joshtumath<br>
&lt;ntim> q+<br>
&lt;matthieud> joshtumath:  As author, I'm often confuse between using the meta tag vs the css property<br>
&lt;emilio> q+<br>
&lt;matthieud> joshtumath: Are they equivalent ? Now they would not be equivalent anymore<br>
&lt;matthieud> joshtumath: And also weird when using the property on the root<br>
&lt;matthieud> TabAtkins: they are the same right now<br>
&lt;matthieud> emilio: Not really, the meta change the value of "normal"<br>
&lt;astearns> ack miriam<br>
&lt;emilio> ack emilio<br>
&lt;matthieud> miriam: We've discussed similar stuff with the Preferences API (changing the result of MQ)<br>
&lt;matthieud> miriam:  As author, I'm sometimes interested to know what the user (the OS) setting is even if I overwrite with the property<br>
&lt;fantasai> +1 miriam<br>
&lt;joshtumath> q+<br>
&lt;matthieud> miriam: I would like to be able to query the normal setting on the page (so no overwrite of the MQ) ; but I'm also interested into overwriting it<br>
&lt;matthieud> emilio: You can already modify the preferences (with iframe or svg?)<br>
&lt;fantasai> [prefers-color-scheme on embedded content takes the value from the embedding element's color-scheme]<br>
&lt;matthieud> TabAtkins:  Assuming you are on a page with has set the meta to dark. What is the goal of knowing the original user value ?<br>
&lt;matthieud> s/with/which<br>
&lt;matthieud> miriam:  Not sure, interesting to know if my author default is different from the user default. Like for example providing a toggle if they don't match<br>
&lt;matthieud> TabAtkins:  That would use javascript<br>
&lt;matthieud> miriam: yes but it would be more robust with html<br>
&lt;matthieud> TabAtkins:  But it doesn't work today. If meta is dark, and you use the MQ to set style, you will have inconsistent result<br>
&lt;astearns> ack ntim<br>
&lt;kizu> q+<br>
&lt;astearns> zakim, close queue<br>
&lt;Zakim> ok, astearns, the speaker queue is closed<br>
&lt;matthieud> ntim:  meta tag values are the same as the property, but MQ only supports a subset of them<br>
&lt;astearns> ack joshtumath<br>
&lt;matthieud> TabAtkins:  The proposal is that the prefers MQ takes into account the meta tag ; so it just match only the used value of the color-scheme property (so no issue)<br>
&lt;matthieud> joshtumath:  Maybe we need a new MQ<br>
&lt;matthieud> TabAtkins:  If we introduce a new MQ which take into account the meta, there would not be any use for the original one which only reflect the OS value<br>
&lt;ntim> q+<br>
&lt;matthieud> TabAtkins:  it could be a JS API if we really want to have the default value without the meta<br>
&lt;astearns> ack kizu<br>
&lt;miriam> curious if that's true...<br>
&lt;matthieud> kizu:  +1 for this as a style query<br>
&lt;matthieud> TabAtkins:  style quuery is nice to do non color styling, but it is useful for the MQ to differ from the style query ?<br>
&lt;matthieud> TabAtkins: do we want both mechanism ?<br>
&lt;matthieud> astearns: in your solution the MQ and the style query would differ when you set value on the root<br>
&lt;matthieud> TabAtkins: Yes<br>
&lt;TabAtkins> &lt;meta name=color-scheme content=dark>, then `color-scheme: light dark`<br>
&lt;matthieud> kizu: if html meta dark with only 1 value, but author css color-scheme root both light and dark. What do we do ? Author might want to override this<br>
&lt;matthieud> TabAtkins:  preference for this should affect how the color-scheme property resolves<br>
&lt;astearns> ack fantasai<br>
&lt;Zakim> fantasai, you wanted to back up suggestion of style query being more appropriate here<br>
&lt;matthieud> fantasai:  the style query makes more sense<br>
&lt;matthieud> fantasai:  we want to used value and not the computed value here<br>
&lt;matthieud> fantasai: if you change the color-scheme in the middle of the page, but other part you want the user preference "normal", Tab solution doesnt work<br>
&lt;matthieud> fantasai:  Only works with a style query<br>
&lt;matthieud> fantasai: It would avoid the confusion between color-scheme meta and color-scheme MQ<br>
&lt;matthieud> fantasai: And you can do a container query on the root to get the value of the meta tag<br>
&lt;emilio> +1 to TabAtkins, not sure they need to be exclusive<br>
&lt;matthieud> TabAtkins: Elika solution is nice, let's go back to the issue<br>
&lt;fantasai> It would need to be a color-scheme() function<br>
&lt;matthieud> TabAtkins: my solution is still valid<br>
&lt;fantasai> since the computed value wouldn't work for this purpose<br>
&lt;fantasai> we need the used color-scheme<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10249#issuecomment-2302515655 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 21 August 2024 16:35:10 UTC