w3c / w3c/csswg-drafts

[css-mediaqueries] Clarify propagated preferred color-scheme on SVG images with color-scheme: normal and no color-scheme meta tag

Open
#7,526 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

mediaqueries-4 Needs Edits
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-scheme property 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-scheme matches), 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.