Intent to prototype and ship: Honor media HTML attribute for meta name=theme-color
François Beaufort 🇫🇷
Contact emails
Explainer
https://github.com/whatwg/html/issues/6495
https://photos.app.goo.gl/kmhABhbVqVzneKxN6
Spec
https://github.com/whatwg/html/pull/6569
https://whatpr.org/html/6569/d79dc8e...66167db/semantics.html#the-meta-element
TAG review
As we're following Safari here and there seems to be WHATWG agreement on landing this, a TAG review doesn't seem required.
Summary
The meta element’s “media” attribute will be honored for meta[name="theme-color"] so that web developers can adjust the theme color of their site based on a media query (dark and light modes for instance). The first one that matches will be picked.
Blink component
Is this feature supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
Yes.
Demo link
https://media-meta-theme-color.glitch.me
Debuggability
DevTools already support viewport resizing and emulating a number of media features such as “prefers-color-scheme” and “prefers-reduced-motion” enabling web developers to observe theme color changes.
Measurement
The kMediaMetaThemeColor WebFeature will track the “media” attribute usage for meta[name="theme-color"] .
Risks
Interoperability and Compatibility
Safari is shipping this feature as part of their Safari 15 overall UI redesign (https://bugs.webkit.org/show_bug.cgi?id=224389)
Firefox does not do anything with meta[name=”theme-color”] anymore. (https://bugzilla.mozilla.org/show_bug.cgi?id=1706179#c2)
For compatibility risk, I've scanned the HTTP archive table
“httparchive.response_bodies.2020_10_01_desktop” and “httparchive.response_bodies.2020_08_01_mobile” and there are no websites using meta[name=”theme-color”] with the “media” HTML attribute.
Signals from other implementations (Gecko, WebKit):
Gecko: No Signal (https://github.com/mozilla/standards-positions/issues/514)
WebKit: Positive (https://github.com/whatwg/html/issues/6495)
Web / Framework developers: Positive (https://twitter.com/search?q=theme-color%20safari)
Ergonomics:
N/A
Activation:
Web developers should have the first meta[name="theme-color"] in tree order be the one without preference (by default, light mode for instance) and have any alternates come after. In other words, browsers that don’t support this feature would always pick the first one while new versions of Chrome would pick dark or light depending on system preference.
<meta name="theme-color" media="(prefers-color-scheme: light)" content="lightskyblue">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="darkblue">
<meta name="theme-color" media="(prefers-contrast: more)" content="blue">
…
Chrome will use it for installed PWAs on Desktop and for all websites on Android.
Is this feature fully tested by web-platform-tests? Link to test suite results from wpt.fyi.
No. A test suite is currently impossible due to the lack of an API to get the theme color (https://github.com/web-platform-tests/wpt/issues/29309). However some reflection tests are added (https://github.com/web-platform-tests/wpt/pull/28876). It is fully tested in Chromium using browser tests.
Tracking bug
https://bugs.chromium.org/p/chromium/issues/detail?id=1200528
Entry on the feature dashboard
https://www.chromestatus.com/feature/5764461413531648
Rune Lillesveen
Summary
The meta element’s “media” attribute will be honored for meta[name="theme-color"] so that web developers can adjust the theme color of their site based on a media query (dark and light modes for instance). The first one that matches will be picked.
Is this feature fully tested by web-platform-tests? Link to test suite results from wpt.fyi.
No. A test suite is currently impossible due to the lack of an API to get the theme color (https://github.com/web-platform-tests/wpt/issues/29309). However some reflection tests are added (https://github.com/web-platform-tests/wpt/pull/28876). It is fully tested in Chromium using browser tests.
Rune Lillesveen
François Beaufort 🇫🇷
On Mon, Jun 14, 2021 at 12:03 PM Rune Lillesveen <fut...@chromium.org> wrote:On Mon, Jun 14, 2021 at 10:44 AM 'François Beaufort 🇫🇷' via blink-dev <blin...@chromium.org> wrote:Summary
The meta element’s “media” attribute will be honored for meta[name="theme-color"] so that web developers can adjust the theme color of their site based on a media query (dark and light modes for instance). The first one that matches will be picked.
Were other meta elements' processing considered to be affected by media?
Is this feature fully tested by web-platform-tests? Link to test suite results from wpt.fyi.
No. A test suite is currently impossible due to the lack of an API to get the theme color (https://github.com/web-platform-tests/wpt/issues/29309). However some reflection tests are added (https://github.com/web-platform-tests/wpt/pull/28876). It is fully tested in Chromium using browser tests.This adds "media" to the HTMLMetaElement idl and that API should be covered by tests.I stopped reading after "No. A test suite is currently impossible due to the lack of an API to get the theme color".The reflection tests were the type of tests I was asking for.
--Rune Lillesveen
Yoav Weiss
François Beaufort 🇫🇷
Thanks for working on this!On Monday, June 14, 2021 at 10:44:20 AM UTC+2 François Beaufort wrote:Anything preventing the PR from landing?
Otherwise we're good.
Rick Byers
--
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/CAPpwU5%2B53xbLkiw5SyZp3e%3DiwoHibipRNzi%3D1A_NS3nKpOq1Ww%40mail.gmail.com.
Yoav Weiss
Looks like this landing is imminent and everything else looks good, so LGTM1 from me.Thank you for this. I'm particularly glad for the improvement to dark mode support here.On Thu, Jun 17, 2021 at 2:08 PM 'François Beaufort 🇫🇷' via blink-dev <blin...@chromium.org> wrote:On Wed, Jun 16, 2021 at 10:38 PM Yoav Weiss <yoav...@chromium.org> wrote:Thanks for working on this!On Monday, June 14, 2021 at 10:44:20 AM UTC+2 François Beaufort wrote:Anything preventing the PR from landing?A simple wording change still needs to be applied. See https://github.com/whatwg/html/pull/6569#discussion_r653762741
Otherwise we're good.
Daniel Bratell
LGTM3
/Daniel
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAL5BFfUTjFD4%3D0Fz81FtSf62w05%3D7uwnrUtKbE96fUQSMx2jiA%40mail.gmail.com.