[css-mediaqueries] Clarify propagated preferred color-scheme on SVG images with color-scheme: normal and no color-scheme meta tag
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
In https://github.com/w3c/csswg-drafts/issues/7213 we resolved for the preferred color-scheme for SVG images to be context dependent.
However what "context dependent" means can be a bit fuzzy. The way I implemented it in Firefox is using the used color-scheme.
That's usually fine, but for pages which don't use the color-scheme property or meta-tag it is a subtle behavior change, because all the SVG images become light (rather than the previous behavior, which is using the OS preferred color-scheme).
@progers mentioned that they have data that indicates that usage of the prefers-color-scheme media query is much higher than the color-scheme property / meta tag, and we've seen one case of breakage already: https://bugzilla.mozilla.org/show_bug.cgi?id=1779874
I think it'd be better to deal with this case a bit more subtly. Proposed behavior:
- If there's a non-normal
color-schemeproperty or meta tag, then use that color-scheme to propagate to SVG images. - Otherwise use the preferred color-scheme of the document (whatever
prefers-color-schemematches), rather than the "used color scheme" which would be light.
I think this makes sense because we're propagating a preference, rather than the used-color-scheme (so propagating the parent page preference for the normal case makes sense). For our internal use cases in Firefox it didn't quite matter because all internal pages support both light and dark mode.
I think this would be similarly-sensible behavior, and a bit more backwards-compatible. It means that we need to provide that extra definition ("effective color-scheme preference" or something?) on the spec.
Thoughts? cc @lilles @progers @smfr @tabatkins
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with CSSWG issue 7213 and the linked CSS Color Adjustment specification section on the used color-scheme. Review the proposed SVG image propagation behavior and the Firefox compatibility concern described here. Done means reaching a standards resolution and documenting the resulting definition and propagation rules in the relevant specification.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100