Intent to Ship: CSS color-scheme property and meta tag
Rune Lillesveen
Contact emails
Explainer
Spec
https://drafts.csswg.org/css-color-adjust-1/#preferred
No Tag review has been submitted. This feature has been discussed at CSSWG face-to-face meetings with all browser vendors represented.
Summary
The color-scheme property allows an element to indicate which color schemes it is comfortable being rendered with. A used color-scheme is negotiated against the user’s preferred color-scheme which then affects UA style and rendering like the background color of the canvas, the root element color, and theming of UA-rendered elements like form controls and scrollbars. The spec also provides a meta tag for setting the color-scheme as part of presentation level styles for the root element.
This intent is to ship support for the color-scheme property, and the corresponding meta tag, with support for the canvas background and the root element color only. The dark theme rendering of UA elements is work in progress tracked by 929098.
The reasoning for shipping this before the UA forms control styling is shipped, is that the meta tag support is requested by Android WebView as a way for WebView content to opt out of forced darkening (https://developer.android.com/reference/android/webkit/WebSettings.html#setForceDark(int)).
Link to “Intent to Prototype” blink-dev discussion
Intent to Implement for the Meta tag
Intent to Implement for the CSS property
Is this feature supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
Yes.
Debuggability
The preferred color-scheme is already possible to force in devtools to affect the used color-scheme. The CSS property itself is visible as any other CSS property in devtools for style rules and computed style.
Risks
Interoperability and Compatibility
There are interop risks with Safari since their current implementation does not follow the current specification very well, as can be seen by the test results in wpt.fyi. Most notably, a bunch of tests fail because:
They do not apply the meta value to the presentation style of the root element: https://bugs.webkit.org/show_bug.cgi?id=205798
They name the initial value ‘auto’ instead of ‘normal’: https://bugs.webkit.org/show_bug.cgi?id=205799
They support forcing dark UA styling by accepting “only dark”
See the github issue about limiting ‘only’ below.
Open spec issues:
[css-color-adjust-1] What happens with multiple <meta>s? · Issue #3846 · w3c/csswg-drafts (Corresponding to issue 3 in the spec)
[css-color-adjust-1] Limits on the `only` color scheme keyword · Issue #3881 · w3c/csswg-drafts (Corresponding to issue 2 in the spec)
Ideally #3846 and #4608 should be resolved before shipping.
Firefox: open issues, but not started:
https://bugzilla.mozilla.org/show_bug.cgi?id=1525107
https://bugzilla.mozilla.org/show_bug.cgi?id=1576289
Edge: Public support
Safari: Shipped
Ergonomics
This feature is typically used in combination with the prefers-color-scheme @media query (shipped in M76), where the color-scheme property is used to affect UA styling and the @media query is used to add author styles based on the preferred color-scheme.
Activation
NA
Is this feature fully tested by web-platform-tests?
All current tests in css/css-color-adjust are testing color-scheme: wpt.fyi
Entry on the feature dashboard
Meta tag: https://chromestatus.com/feature/5330651267989504
CSS property: https://chromestatus.com/feature/6070987093180416
Anne van Kesteren
> https://drafts.csswg.org/css-color-adjust-1/#preferred
When is upstreaming to HTML happening as discussed in
https://github.com/whatwg/html/issues/4504?
Rune Lillesveen
Anne van Kesteren
> Would the preference be to upstream the section to the whatwg spec and add that issue to the whatwg spec or try to get a resolution in the CSS spec before upstreaming?
https://whatwg.org/working-mode#changes for details on the
requirements.
Chris Harrelson
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CADnb78iQVsNvoHbHznd_aJFcLxnhy0weH%2B-W5pe4JX0tbgnndA%40mail.gmail.com.
Daniel Bratell
I'm a little bit worried that the spec discussions that futhark
initiated will result in a non-compatible change which could make
things complicated for web developers. @futhark, should I be
worried?
/Daniel
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw9HdgM0fXfPO_8JQNfTXqxBcyp3FX01iz1ES6Mn3Fm9mg%40mail.gmail.com.
Rune Lillesveen
I'm a little bit worried that the spec discussions that futhark initiated will result in a non-compatible change which could make things complicated for web developers. @futhark, should I be worried?
Yoav Weiss
On Thu, Jan 23, 2020 at 10:18 PM Daniel Bratell <brat...@gmail.com> wrote:I'm a little bit worried that the spec discussions that futhark initiated will result in a non-compatible change which could make things complicated for web developers. @futhark, should I be worried?
An update on the open issues:- Issue 4608: Was resolved in the CSSWG F2F last week.
- Issue 3881: Not allowing author content to ask for dark colors and form controls when the user does not have a preferred dark color scheme is something we could add later to the spec/implementation if we resolve on that. Shipping with support for 'only light' at this point is OK, I think.
- Issue 3846: Domenic recommended current spec, but respecting <meta> tags outside <head> as well. I've pinged Simon Fraser in the issue since WebKit already shipped.
--
/Daniel
On 2020-01-23 20:20, Chris Harrelson wrote:
LGTM1
I agree that a TAG review is not necessary given the amount of scrutiny this API has already received, that it is already shipped in Safari, and that we reached the same conclusion about skipping a TAG review for the media query (that shipped ~6 months ago).
--On Thu, Jan 23, 2020 at 8:03 AM Anne van Kesteren <ann...@annevk.nl> wrote:
On Wed, Jan 22, 2020 at 7:53 PM Rune Lillesveen <fut...@chromium.org> wrote:
> Would the preference be to upstream the section to the whatwg spec and add that issue to the whatwg spec or try to get a resolution in the CSS spec before upstreaming?
Ideally the design is fully settled. See
https://whatwg.org/working-mode#changes for details on the
requirements.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CADnb78iQVsNvoHbHznd_aJFcLxnhy0weH%2B-W5pe4JX0tbgnndA%40mail.gmail.com.
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw9HdgM0fXfPO_8JQNfTXqxBcyp3FX01iz1ES6Mn3Fm9mg%40mail.gmail.com.
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeQw2wEVDNF6gmn%3DpjOSj6j15_G5U9cgfeeMggVDod%2BRMQ%40mail.gmail.com.
Rick Byers
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACj%3DBEiGSbF8ucCjGXFbDSmY%3Dzs5XmZvBSBf%3DbWP0seKEtQ3yQ%40mail.gmail.com.