Intent to prototype: Sec-CH-Prefers-Color-Scheme client hint header

108 views
Skip to first unread message

François Beaufort 🇫🇷

unread,
May 17, 2021, 7:42:32 AMMay 17
to blink-dev, Thomas Steiner

Contact emails

fbea...@chromium.org, to...@chromium.org


Explainer

https://github.com/tomayac/user-preference-media-features-headers/blob/main/README.md


Specification

https://tomayac.github.io/user-preference-media-features-headers/#sec-ch-prefers-color-scheme


API spec

Yes


Summary

The Sec-CH-Prefers-Color-Scheme client hint is modeled after the prefers-color-scheme user preference media feature as defined in Media Queries Level 5.


Blink component

Blink>DarkMode


Motivation

CSS media queries, and specifically user preference media features like prefers-color-scheme, have a potentially significant impact on the amount of CSS that needs to be delivered by a page, and on the experience the user is going to have when the page loads.


It is a best practice to not load CSS for the particular non-matching color scheme in the critical rendering path, and instead to initially only load the currently relevant CSS. One way of doing so is via <link media>. However, high-traffic sites like Google Search that wish to honor user preference media features like prefers-color-scheme and that inline CSS for performance reasons, need to know about the preferred color scheme (or other user preference media features respectively) ideally at request time, so that the initial HTML payload already has the right CSS inlined.


TAG review

https://github.com/w3ctag/design-reviews/issues/632 


TAG review status

Pending

Demo link

https://sec-ch-prefers-color-scheme.glitch.me/


Debuggability

https://crbug.com/1209765 


Measurement

The kClientHintsPrefersColorScheme WebFeature will track Sec-CH-Prefers-Color-Scheme client hint usage.


Risks


Interoperability and Compatibility

Signals from other implementations (Gecko, WebKit): 

Gecko: Pending (https://github.com/mozilla/standards-positions/issues/526)

WebKit: Pending (https://lists.webkit.org/pipermail/webkit-dev/2021-May/031856.html

Web / Framework developers: Positive (Twitter: https://twitter.com/kilianvalkhof/status/1392404416335056896. The proposal was initially discussed in https://github.com/w3c/csswg-drafts/issues/4162 and received positive feedback via 16 Likes and 3 supportive comments: https://github.com/w3c/csswg-drafts/issues/4162#issuecomment-621047333, https://github.com/w3c/csswg-drafts/issues/4162#issuecomment-631400330, and https://github.com/w3c/csswg-drafts/issues/4162#issuecomment-645742958)


Activation:

Developers will include Sec-CH-Prefers-Color-Scheme in the response headers Accept-CH and Critical-CH to let the browser know that they’re interested in the preferred color scheme. If supported, the request header Sec-CH-Prefers-Color-Scheme will be populated with the appropriate value.


Is this feature fully tested by web-platform-tests?

Yes. We will add new tests for these proposed changes at https://wpt.fyi/results/client-hints.


Flag name

enable-experimental-web-platform-features


Tracking bug

https://crbug.com/1207897


Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5642300464037888 


François Beaufort 🇫🇷

unread,
May 17, 2021, 8:34:39 AMMay 17
to blink-dev, Thomas Steiner

There are no particular compatibility risks.
Interoperability is still pending on other browser vendors replying. Support for Client Hints in general is not enthusiastic though.

Rune Lillesveen

unread,
May 18, 2021, 6:18:12 AMMay 18
to François Beaufort 🇫🇷, blink-dev, Thomas Steiner
On Mon, May 17, 2021 at 1:42 PM 'François Beaufort 🇫🇷' via blink-dev <blin...@chromium.org> wrote:

Contact emails

fbea...@chromium.org, to...@chromium.org


Explainer

https://github.com/tomayac/user-preference-media-features-headers/blob/main/README.md


Specification

https://tomayac.github.io/user-preference-media-features-headers/#sec-ch-prefers-color-scheme


API spec

Yes


Summary

The Sec-CH-Prefers-Color-Scheme client hint is modeled after the prefers-color-scheme user preference media feature as defined in Media Queries Level 5.


Blink component

Blink>DarkMode


Thanks for taking this on.

I'd prefer if you used another component than Blink>DarkMode here. The rendering team is triaging Blink>DarkMode but would like to phase it out as it tends to be a bucket of everything dark mode related from WebUI, chrome:// tabs, forced darkening, and the CSS features. We move issues into Blink>CSS for media queries and CSS properties, Blink>Paint>DarkMode for force darkening, and UI for UI related. Perhaps some network component would be more suitable? Or should this also be Blink>CSS?

--
Rune Lillesveen

Thomas Steiner

unread,
May 18, 2021, 6:37:00 AMMay 18
to Rune Lillesveen, François Beaufort 🇫🇷, blink-dev, Thomas Steiner
Since the future headers (after the current pilot with just Sec-CH-Prefers-Color-Scheme) will likewise be inspired by CSS (https://tomayac.github.io/user-preference-media-features-headers/#user-preference-media-features), Blink>CSS may not seem like the weirdest choice (we were thinking of using it before). Although something network-related also sounds suitable.  

François Beaufort 🇫🇷

unread,
May 18, 2021, 6:46:40 AMMay 18
to Thomas Steiner, Rune Lillesveen, blink-dev
Let's go with Blink>CSS then.
I'll update ChromeStatus entry and component bug. 
Reply all
Reply to author
Forward
0 new messages