Define <meta media>. Fixes #6495. #6569

hober · 2021-04-09T20:44:37Z

At least two implementers are interested (and none opposed):
- Safari is interested (feature proposed by Safari/WebKit engineer)
- Edge supports this change
- Mozilla position requested
Tests are written and can be reviewed and commented upon at:
- Add reflection tests for the meta@media attribute web-platform-tests/wpt#28876
Implementation bugs are filed:
- Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=1200528
- Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1706179
- Safari: https://webkit.org/b/224389

(See WHATWG Working Mode: Changes for more details.)

/acknowledgements.html ( diff )
/indices.html ( diff )
/semantics.html ( diff )

annevk

Looks reasonable to me.

You also need to update the element index to add media to meta.

source

hober · 2021-04-15T16:59:45Z

You also need to update the element index to add media to meta.

Good catch. Fixed in 43d605f.

… 'prefers-color-scheme' media feature.

…Fix incorrect data-x attribute value.

annevk

Looks good to me modulo nits.

Because of the IDL attribute we need to require tests and implementer support, I think.

source

hober · 2021-04-19T21:10:10Z

Looks good to me modulo nits.

I fixed them in 0381fe9.

Because of the IDL attribute we need to require tests and implementer support, I think.

Yup! I've filed Implementation bugs & a Mozilla standards-positions issue, and @gsnedders is going to write some tests.

annevk · 2021-04-20T07:19:22Z

Looking at the history of theme-color it seems Adam Barth was involved. @domenic do you know if Google still has an interest here?

domenic · 2021-04-20T15:14:06Z

My understanding is that we generally nudge people toward web app manifests instead, but I will ask around.

annevk · 2021-04-20T15:31:19Z

source

+        <li><p>If <var>element</var> has a <code data-x="attr-link-media">media</code> attribute
+        and the value of <var>element</var>'s <code data-x="attr-meta-media">media</code>
+        attribute does not <span data-x="matches the environment">match the environment</span>, then
+        <span>continue</span>.</p></li>


@bgrins pointed out to me that this step would preclude updating the theme color if the user changed their preferences, e.g., from light to dark mode. That doesn't seem great?

For link@rel=stylesheet in https://html.spec.whatwg.org/multipage/links.html#link-type-stylesheet it just relies on CSSOM to define this; for all other link types it seems like https://html.spec.whatwg.org/multipage/semantics.html#processing-the-media-attribute doesn't actually reprocess media either.

I think that's one of the reasons we have to be careful about using media with <link> (and why I pushed back on it for rel=manifest).

@bgrins pointed out to me that this step would preclude updating the theme color if the user changed their preferences, e.g., from light to dark mode. That doesn't seem great?

I don't think that's true? If the user updates their preferences (to dark mode, say), this step will cause <meta ... media="(prefers-color-scheme: light)"> to be skipped. Which is what you want. On a subsequent iteration of the loop, when this step looks at <meta ... media="(prefers-color-scheme: dark)">, it won't skip it.

Oh, I see what you mean. Nothing causes the algorithm to be re-run when the environment changes. I think I've fixed this in 66167db. Let me know what you think, @annevk.

hober · 2021-04-22T17:07:23Z

My understanding is that we generally nudge people toward web app manifests instead, but I will ask around.

At the time <meta name=brand-color> was proposed, Adam and others made this compelling (to me anyway) argument:

Unfortunately, the manifest isn't a good fit for this feature because the manifest is fetched asynchronously. If we want to use the brand-color to select the color of the tabstrip or the omnibox, we'll have a jaring experience if the color appears asynchronously after a network round-trip.
[…]
Generally speaking, I agree that it makes sense to move as much from meta tags to manifest as practical, but we need to weigh each feature individually to understand what creates the best user experience. In this case, the user experience would be markedly worse if we used the manifest.

myakura · 2021-04-22T18:16:56Z

My understanding is that we generally nudge people toward web app manifests instead, but I will ask around.

At the time <meta name=brand-color> was proposed, Adam and others made this compelling (to me anyway) argument:

theme_color (or other Web App Manifest members in general) are only supported in installed PWAs but not in normal web pages or homescreen PWAs (in Chrome).
https://bugs.chromium.org/p/chromium/issues/detail?id=924451

theme-color metatag, does however, support both normal content and PWAs. so <meta media> will reach a broader forms of web.

…-run when the environment changes.

aarongustafson · 2021-05-21T17:21:08Z

Since it's Edge rather than Chromium overall that expresses interest, we'd like to follow the additional recommendations of https://whatwg.org/working-mode#additions. @aarongustafson do you plan to implement this soon? Is there an intent to ship underway or will this only ship in Edge?

We are supportive of the feature, but have not assigned anyone to implement it. I am asking around to see where this might fall in the backlog. Discussion about that is on the Chrome bug.

jensimmons · 2021-06-07T12:08:07Z

Any movement on this? I would really like to see this land in HTML this week. I hear no objections. We have consensus about the syntax — there's nothing left to debate. We have interest from two implementors. Spec work is underway to add this ability to web manifest files as well, so that we have parity. What's the blocker?

domenic · 2021-06-07T15:04:02Z

The blocker is a second implementer that has the feature on their near term roadmap, per the WHATWG working mode's "should". See Anne's comment from 28 days ago.

beaufortfrancois · 2021-06-08T13:36:54Z

For multiple equally appropriate link rel="icon", the last one is always picked as specified in the HTML spec

If there are multiple equally appropriate icons, user agents must use the last one declared in tree order at the time that the user agent collected the list of icons.

Why is this different for meta name="theme-color"?
Why not picked the last one for consistency?

hober · 2021-06-08T20:22:24Z

For multiple equally appropriate link rel="icon", the last one is always picked as specified in the HTML spec

If there are multiple equally appropriate icons, user agents must use the last one declared in tree order at the time that the user agent collected the list of icons.

Why is this different for meta name="theme-color"?
Why not picked the last one for consistency?

This PR doesn't change that aspect of <meta name=theme-color>. If you think this is a bug, please file an issue on the spec!

beaufortfrancois · 2021-06-09T10:05:36Z

This PR doesn't change that aspect of <meta name=theme-color>. If you think this is a bug, please file an issue on the spec!

@hober You're right it doesn't change that aspect specifically. The addition of the media attribute however makes it so that multiple <meta> elements will now be expected while it didn't make much sense before.

hober · 2021-06-11T15:39:30Z

There's an in-progress Chromium CL by @beaufortfrancois of the Chrome team that adds support for this. Does this count as a second implementer?

domenic · 2021-06-11T15:44:29Z

Yeah, that seems really promising. Let's wait to see if they actually intend to prototype or ship (by sending the corresponding email to blink-dev), but if that happens and this doesn't just end up a personal experiment in a branch, we'll be in good shape.

tomayac · 2021-06-11T15:53:42Z

@beaufortfrancois has the email in draft. It’s not just an experiment. 😃

beaufortfrancois · 2021-06-11T19:00:50Z

Yep @beaufortfrancois is excited to bring this feature to Chrome ;) Expect an intent to be sent next week.

FYI @b1tr0t

beaufortfrancois · 2021-06-14T08:45:14Z

And here's our intent to prototype and ship: https://groups.google.com/a/chromium.org/g/blink-dev/c/6I-I3lZWy5k

source

This CL makes sure the media HTML attribute is supported for the meta HTML element when name is "theme-color" so that the status bar color is reflected when media features change (light/dark mode for instance). Intent to prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/6I-I3lZWy5k Spec PR: whatwg/html#6569 Demo: https://media-meta-theme-color.glitch.me/ Change-Id: Id284c9b67f6d61635680357f337211f1a8c14dc6 Bug: 1200528 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2945116 Commit-Queue: François Beaufort <beaufort.francois@gmail.com> Reviewed-by: Yoav Weiss <yoavweiss@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Reviewed-by: David Roger <droger@chromium.org> Cr-Commit-Position: refs/heads/master@{#893838}

This CL enables by default the flag to honor the media HTML attribute for <meta name="theme-color">. Intent to ship: https://groups.google.com/a/chromium.org/g/blink-dev/c/6I-I3lZWy5k Spec PR: whatwg/html#6569 Demo: https://media-meta-theme-color.glitch.me/ Bug: 1200528 Change-Id: Ic8fed423a4610a4f2dfbad31728715400aa0de24 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2959617 Reviewed-by: Yoav Weiss <yoavweiss@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: François Beaufort <beaufort.francois@gmail.com> Cr-Commit-Position: refs/heads/master@{#894186}

beaufortfrancois · 2021-06-22T13:24:01Z

FYI It's in Chrome Canary as well now: https://twitter.com/quicksave2k/status/1407326048526770176

domenic

Thanks for your patience and edits!

domenic · 2021-06-23T16:50:20Z

source

@@ -13689,7 +13689,7 @@ interface <dfn>HTMLLinkElement</dfn> : <span>HTMLElement</span> {
  data-x="attr-link-media">media</code> attribute is prescriptive. The user agent must apply the
  external resource when the <code data-x="attr-link-media">media</code> attribute's value
  <span>matches the environment</span> and the other relevant conditions apply, and must not apply
-  it otherwise.</p><!-- note similar text in <style> element section -->
+  it otherwise.</p><!-- note similar text in <style> and <meta> element sections -->


This comment change should be reverted. I will fix and then merge.

…tions

For whatwg/html#6569.

…attribute, a=testonly Automatic update from web-platform-tests Add reflection tests for the meta@media attribute For whatwg/html#6569. -- wpt-commits: 8be2ce944ac18cae010c851f23b7f3f06826f913 wpt-pr: 28876

This CL makes sure the media HTML attribute is supported for the meta HTML element when name is "theme-color" so that the status bar color is reflected when media features change (light/dark mode for instance). Intent to prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/6I-I3lZWy5k Spec PR: whatwg/html#6569 Demo: https://media-meta-theme-color.glitch.me/ Change-Id: Id284c9b67f6d61635680357f337211f1a8c14dc6 Bug: 1200528 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2945116 Commit-Queue: François Beaufort <beaufort.francois@gmail.com> Reviewed-by: Yoav Weiss <yoavweiss@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Reviewed-by: David Roger <droger@chromium.org> Cr-Commit-Position: refs/heads/master@{#893838} NOKEYCHECK=True GitOrigin-RevId: 99a4b42f00c0839bb0b5b3d56cca2a06315dd1b0

This CL enables by default the flag to honor the media HTML attribute for <meta name="theme-color">. Intent to ship: https://groups.google.com/a/chromium.org/g/blink-dev/c/6I-I3lZWy5k Spec PR: whatwg/html#6569 Demo: https://media-meta-theme-color.glitch.me/ Bug: 1200528 Change-Id: Ic8fed423a4610a4f2dfbad31728715400aa0de24 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2959617 Reviewed-by: Yoav Weiss <yoavweiss@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: François Beaufort <beaufort.francois@gmail.com> Cr-Commit-Position: refs/heads/master@{#894186} NOKEYCHECK=True GitOrigin-RevId: 4ad19e2adda9a33a5ff79cedcfbe5d7d39387491

hober requested a review from annevk April 9, 2021 20:44

hober self-assigned this Apr 9, 2021

hober linked an issue Apr 9, 2021 that may be closed by this pull request

New feature proposal: add support for media attribute to <meta name="theme-color"> #6495

Closed

hober mentioned this pull request Apr 9, 2021

New feature proposal: add support for media attribute to <meta name="theme-color"> #6495

Closed

annevk reviewed Apr 13, 2021

View reviewed changes

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

hober added 5 commits April 16, 2021 10:25

Define <meta media>.

37f646e

Change Media Queries reference to point at Level 5, which defines the…

f91d70d

… 'prefers-color-scheme' media feature.

Remove spurious whitespace change.

c01ced1

Update the Element index to mention <meta media>.

2a41736

Revert 2d75d06.

4d28596

hober force-pushed the meta-media-6495 branch from 43d605f to 4d28596 Compare April 16, 2021 17:26

Restore the author conformance criteria for <meta name=theme-color>. …

b0c059d

…Fix incorrect data-x attribute value.

annevk approved these changes Apr 19, 2021

View reviewed changes

source Show resolved Hide resolved

source Show resolved Hide resolved

source Show resolved Hide resolved

source Show resolved Hide resolved

hober mentioned this pull request Apr 19, 2021

<meta media> (for <meta name=theme-color>) mozilla/standards-positions#514

Open

Address Anne's nits.

0381fe9

annevk reviewed Apr 20, 2021

View reviewed changes

Clarify that the 'obtain a page's theme color' algorithm should be re…

66167db

…-run when the environment changes.

yoavweiss reviewed Jun 14, 2021

View reviewed changes

source Show resolved Hide resolved

beaufortfrancois mentioned this pull request Jun 14, 2021

Add media attribute support for meta[name=theme-color] mdn/content#5985

Merged

Don't use the 'purely advisory' wording for <meta media>.

13d355f

hober requested a review from domenic June 23, 2021 00:14

domenic approved these changes Jun 23, 2021

View reviewed changes

domenic added 2 commits June 23, 2021 12:53

Revert "similar text"; also separate IDL and content attribute defini…

b3a9841

…tions

Missed a word in the revert

7058443

domenic merged commit cf222a3 into whatwg:main Jun 23, 2021

hober deleted the meta-media-6495 branch June 23, 2021 23:47

brc-dd mentioned this pull request Aug 4, 2021

[react] Add media attribute support for meta DefinitelyTyped/DefinitelyTyped#54936

Merged

8 tasks

gsnedders added a commit to web-platform-tests/wpt that referenced this pull request Jan 21, 2022

Add reflection tests for the meta@media attribute

8be2ce9

For whatwg/html#6569.

larsgw mentioned this pull request Aug 31, 2023

Add PWA manifest enabling installation on android larsgw/censordle#20

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Define <meta media>. Fixes #6495. #6569

Define <meta media>. Fixes #6495. #6569

hober commented Apr 9, 2021 •

edited by pr-preview bot

Loading

annevk left a comment

hober commented Apr 15, 2021

annevk left a comment

hober commented Apr 19, 2021

annevk commented Apr 20, 2021

domenic commented Apr 20, 2021

annevk Apr 20, 2021

gsnedders Apr 21, 2021

annevk Apr 21, 2021

hober Apr 22, 2021

hober Apr 22, 2021

hober commented Apr 22, 2021 •

edited

Loading

myakura commented Apr 22, 2021 •

edited

Loading

aarongustafson commented May 21, 2021

jensimmons commented Jun 7, 2021

domenic commented Jun 7, 2021 •

edited

Loading

beaufortfrancois commented Jun 8, 2021

hober commented Jun 8, 2021

beaufortfrancois commented Jun 9, 2021

hober commented Jun 11, 2021

domenic commented Jun 11, 2021

tomayac commented Jun 11, 2021

beaufortfrancois commented Jun 11, 2021

beaufortfrancois commented Jun 14, 2021

beaufortfrancois commented Jun 22, 2021 •

edited

Loading

domenic left a comment

domenic Jun 23, 2021

Define <meta media>. Fixes #6495. #6569

Define <meta media>. Fixes #6495. #6569

Conversation

hober commented Apr 9, 2021 • edited by pr-preview bot Loading

annevk left a comment

Choose a reason for hiding this comment

hober commented Apr 15, 2021

annevk left a comment

Choose a reason for hiding this comment

hober commented Apr 19, 2021

annevk commented Apr 20, 2021

domenic commented Apr 20, 2021

annevk Apr 20, 2021

Choose a reason for hiding this comment

gsnedders Apr 21, 2021

Choose a reason for hiding this comment

annevk Apr 21, 2021

Choose a reason for hiding this comment

hober Apr 22, 2021

Choose a reason for hiding this comment

hober Apr 22, 2021

Choose a reason for hiding this comment

hober commented Apr 22, 2021 • edited Loading

myakura commented Apr 22, 2021 • edited Loading

aarongustafson commented May 21, 2021

jensimmons commented Jun 7, 2021

domenic commented Jun 7, 2021 • edited Loading

beaufortfrancois commented Jun 8, 2021

hober commented Jun 8, 2021

beaufortfrancois commented Jun 9, 2021

hober commented Jun 11, 2021

domenic commented Jun 11, 2021

tomayac commented Jun 11, 2021

beaufortfrancois commented Jun 11, 2021

beaufortfrancois commented Jun 14, 2021

beaufortfrancois commented Jun 22, 2021 • edited Loading

domenic left a comment

Choose a reason for hiding this comment

domenic Jun 23, 2021

Choose a reason for hiding this comment

hober commented Apr 9, 2021 •

edited by pr-preview bot

Loading

hober commented Apr 22, 2021 •

edited

Loading

myakura commented Apr 22, 2021 •

edited

Loading

domenic commented Jun 7, 2021 •

edited

Loading

beaufortfrancois commented Jun 22, 2021 •

edited

Loading