Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 11 commits into from
Jun 23, 2021
+46 −13
Merged

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

Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
37f646e
Define <meta media>.
hober Apr 9, 2021
f91d70d
Change Media Queries reference to point at Level 5, which defines the…
hober Apr 9, 2021
c01ced1
Remove spurious whitespace change.
hober Apr 9, 2021
2a41736
Update the Element index to mention <meta media>.
hober Apr 15, 2021
4d28596
Revert 2d75d06.
hober Apr 16, 2021
b0c059d
Restore the author conformance criteria for <meta name=theme-color>. …
hober Apr 16, 2021
0381fe9
Address Anne's nits.
hober Apr 19, 2021
66167db
Clarify that the 'obtain a page's theme color' algorithm should be re…
hober Apr 22, 2021
13d355f
Don't use the 'purely advisory' wording for <meta media>.
hober Jun 23, 2021
b3a9841
Revert "similar text"; also separate IDL and content attribute defini…
domenic Jun 23, 2021
7058443
Missed a word in the revert
domenic Jun 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 43 additions & 9 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


<p id="default-media">The default, if the <code data-x="attr-link-media">media</code> attribute is
omitted, is "<code data-x="">all</code>", meaning that by default links apply to all media.</p>
Expand Down Expand Up @@ -13947,6 +13947,7 @@ interface <dfn>HTMLLinkElement</dfn> : <span>HTMLElement</span> {
<dd><code data-x="attr-meta-http-equiv">http-equiv</code></dd>
<dd><code data-x="attr-meta-content">content</code></dd>
<dd><code data-x="attr-meta-charset">charset</code></dd>
<dd><code data-x="attr-meta-media">media</code></dd>
<dt><span
data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
<dd><a href="https://w3c.github.io/html-aria/#el-meta">For authors</a>.</dd>
Expand All @@ -13960,6 +13961,7 @@ interface <dfn>HTMLMetaElement</dfn> : <span>HTMLElement</span> {
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-meta-name">name</span>;
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-meta-httpEquiv">httpEquiv</span>;
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-meta-content">content</span>;
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-meta-media">media</span>;

// <a href="#HTMLMetaElement-partial">also has obsolete members</a>
};</code></pre>
Expand Down Expand Up @@ -14025,6 +14027,14 @@ interface <dfn>HTMLMetaElement</dfn> : <span>HTMLElement</span> {

</div>

<p>The <dfn element-attr for="meta"><code data-x="attr-meta-media">media</code></dfn> attribute
says which media the metadata applies to. The value must be a <span>valid media query
list</span>. The <dfn attribute
for="HTMLMetaElement"><code data-x="dom-meta-media">media</code></dfn> IDL attribute must
<span>reflect</span> the content attributes of the same name. Unless the <code
data-x="attr-meta-name">name</code> is <code data-x="meta-theme-color">theme-color</code>, the
<code data-x="attr-meta-media">media</code> attribute is purely advisory.</p>
annevk marked this conversation as resolved.
Show resolved Hide resolved
domenic marked this conversation as resolved.
Show resolved Hide resolved


<h5>Standard metadata names</h5>

Expand Down Expand Up @@ -14278,10 +14288,10 @@ interface <dfn>HTMLMetaElement</dfn> : <span>HTMLElement</span> {
surrounding user interface. For example, a browser might color the page's title bar with the
specified value, or use it as a color highlight in a tab bar or task switcher.</p>

<p>There must not be more than one <code>meta</code> element with its <code
data-x="attr-meta-name">name</code> attribute value set to an
<span>ASCII case-insensitive</span> match for <code
data-x="meta-theme-color">theme-color</code> per document.</p>
<p>Within an HTML document, the <code data-x="attr-meta-media">media</code> attribute value must
be unique amongst all the <code>meta</code> elements with their <code
data-x="attr-meta-name">name</code> attribute value set to an <span>ASCII
case-insensitive</span> match for <code data-x="meta-theme-color">theme-color</code>.</p>

<div class="example">

Expand All @@ -14294,6 +14304,19 @@ interface <dfn>HTMLMetaElement</dfn> : <span>HTMLElement</span> {

</div>

<p>The <code data-x="attr-meta-media">media</code> attribute may be used to describe the context
in which the provided color should be used.</p>

<div class="example">
annevk marked this conversation as resolved.
Show resolved Hide resolved
<p>If we only wanted to use "WHATWG green" as this standard's theme color in dark mode,
we could use the <code data-x="">prefers-color-scheme</code> media feature:</p>

<pre><code class="html">&lt;!DOCTYPE HTML>
&lt;title>HTML Standard&lt;/title>
&lt;meta name="theme-color" content="#3c790a" media="(prefers-color-scheme: dark)">
...</code></pre>
</div>
annevk marked this conversation as resolved.
Show resolved Hide resolved

<div w-nodev>

<p>To obtain a page's theme color, user agents must run the following steps:</p>
Expand All @@ -14315,6 +14338,11 @@ interface <dfn>HTMLMetaElement</dfn> : <span>HTMLElement</span> {
<p>For each <var>element</var> in <var>candidate elements</var>:</p>

<ol>
<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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


annevk marked this conversation as resolved.
Show resolved Hide resolved
<li><p>Let <var>value</var> be the result of <span data-x="strip leading and trailing ASCII
whitespace">stripping leading and trailing ASCII whitespace</span> from the value of
<var>element</var>'s <code data-x="attr-meta-content">content</code> attribute.</p></li>
Expand All @@ -14332,8 +14360,11 @@ interface <dfn>HTMLMetaElement</dfn> : <span>HTMLElement</span> {
<p>If any <code>meta</code> elements are <span data-x="node is inserted into a
document">inserted into the document</span> or <span data-x="node is removed from a
document">removed from the document</span>, or existing <code>meta</code> elements have their
<code data-x="attr-meta-name">name</code> or <code data-x="attr-meta-content">content</code>
attributes changed, user agents must re-run the above algorithm and apply the result to any
<code data-x="attr-meta-name">name</code>, <code data-x="attr-meta-content">content</code>, or
<code data-x="attr-link-media">media</code> attributes changed, or if the environment changes
such that any <code>meta</code> element's <code data-x="attr-link-media">media</code>
attribute's value may now or may no longer <span data-x="matches the environment">match the
environment</span>, user agents must re-run the above algorithm and apply the result to any
affected UI.</p>

</div>
Expand Down Expand Up @@ -15144,7 +15175,7 @@ interface <dfn>HTMLStyleElement</dfn> : <span>HTMLElement</span> {
<span w-nodev>The user agent must apply the styles when the <code
data-x="attr-style-media">media</code> attribute's value <span>matches the environment</span> and
the other relevant conditions apply, and must not apply them otherwise.</span></p><!-- note
similar text in <link> element section -->
similar text in the <link> and <meta> element sections -->

<div w-nodev>

Expand Down Expand Up @@ -119418,7 +119449,8 @@ interface <dfn>MimeType</dfn> {
<code data-x="attr-meta-name">name</code>;
<code data-x="attr-meta-http-equiv">http-equiv</code>;
<code data-x="attr-meta-content">content</code>;
<code data-x="attr-meta-charset">charset</code></td>
<code data-x="attr-meta-charset">charset</code>;
<code data-x="attr-meta-media">media</code></td>
<td><code>HTMLMetaElement</code></td>
</tr>

Expand Down Expand Up @@ -121093,6 +121125,7 @@ interface <dfn>MimeType</dfn> {
<tr>
<th> <code data-x="">media</code>
<td> <code data-x="attr-link-media">link</code>;
<code data-x="attr-meta-media">meta</code>;
<code data-x="attr-source-media">source</code> (in <code>picture</code>);
<code data-x="attr-style-media">style</code>
<td> Applicable media
Expand Down Expand Up @@ -123841,6 +123874,7 @@ INSERT INTERFACES HERE
Derek Guenther,
Devarshi Pant,
Devdatta,
Devin Rousso,
Diego Ferreiro Val,
Diego Gonz&aacute;lez Z&uacute;&ntilde;iga <!-- diekus on GitHub -->,
Diego Ponce de León,
Expand Down