2085572 - [mediaqueries] Effect of <meta name=color-scheme> on img and video sources

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[Mozilla Apprentice]

A resolution was made for csswg-drafts/#13377.

[mediaqueries] Effect of <meta name=color-scheme> on img and video sources

• RESOLVED: (prefers-color-scheme) reflects <meta name=color-scheme>. Add (bikeshed-color-scheme) to always reflect the preference coming from the browser. (pending feedback from other commenters in the issue)

Discussion.

Comment 1

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 2085572 - Make color-scheme meta tag affect the prefers-color-scheme media query. r=#style

As per https://github.com/w3c/csswg-drafts/issues/13377

See https://github.com/w3c/csswg-drafts/issues/14493#issuecomment-6382548874
for some context that made me look at this.

The ChromeRulesEnabled check is because I want to remove some chrome
usages of the override.

Comment 2

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 2085572 - Use this rather than magic for theming code. r=#theme

No behavior change, but less magic :)

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/b94dd99eb54f
https://hg.mozilla.org/integration/autoland/rev/43b97a47496d
Make color-scheme meta tag affect the prefers-color-scheme media query. r=firefox-style-system-reviewers,layout-reviewers,dshin

Comment 4

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/43b97a47496d

Comment 5

[Pascal Chevrel (relman team) -> :pascalc]

Did you want to nominate this for the Fx161 relnotes? If so, set the relnote-firefox flag to "?"
https://wiki.mozilla.org/Release_Management/Release_Notes_Nomination

Possible wording:

The prefers-color-scheme media query now reflects the color scheme a page declares with <meta name="color-scheme">.

Comment 6

[Emilio Cobos Álvarez [:emilio]]

Release Note Request (optional, but appreciated)
[Why is this notable]: Improves the ability for sites to select better resources based on color scheme, and to implement color scheme pickers.
[Affects Firefox for Android]: Yes
[Suggested wording]: <meta name=color-scheme> now affects the prefers-colors-cheme media query if it only specifies one scheme, allowing better resource selection and making theme switchers easier to implement.
[Links (documentation, blog post, etc)]: This bug and the CSSWG issue

Comment 7

[Emilio Cobos Álvarez [:emilio]]

Is wpt-sync down? There are tests here that should ideally be upstreamed?

Comment 8

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/64278 for changes under testing/web-platform/tests

Comment 9

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 10

[Francesco Lodolo [:flod]]

@emilio
This just broke automatic theme detection in Pontoon
https://github.com/mozilla/pontoon/issues/4628

While this can be fixed, I'd be surprised if this is the only website affected, so this might become a webcompat issue.

Comment 11

[Emilio Cobos Álvarez [:emilio]]

Seems you specify only light as the supported color scheme so that would need fixing. https://github.com/mozilla/pontoon/blob/774c7ba2fe3629611292c3ea89eb0b8e79938c86/translate/public/translate.html#L14

Do you know how that line came to be? I guess I could add some telemetry if needed, but that seems pretty clearly a pontoon issue.

Comment 12

[Francesco Lodolo [:flod]]

This was added here, apparently to work around an issue with Chrome
https://github.com/mozilla/pontoon/issues/2576