Skip to content

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

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

Merged
domenic merged 11 commits into from
Jun 23, 2021
Merged

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

Changes from all 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
59 changes: 46 additions & 13 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
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 @@ -14014,14 +14016,21 @@ interface <dfn>HTMLMetaElement</dfn> : <span>HTMLElement</span> {
data-x="attr-meta-content">content</code> attribute, then the value part of the metadata
name-value pair is the empty string.</p>

<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>.
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 has no effect on the processing model and must not be used by authors.</p>

<div w-nodev>

<p>The <dfn attribute for="HTMLMetaElement"><code data-x="dom-meta-name">name</code></dfn> and
<dfn attribute for="HTMLMetaElement"><code data-x="dom-meta-content">content</code></dfn> IDL
attributes must <span>reflect</span> the respective content attributes of the same name. The IDL
attribute <dfn attribute for="HTMLMetaElement"><code
data-x="dom-meta-httpEquiv">httpEquiv</code></dfn> must <span>reflect</span> the content attribute
<code data-x="attr-meta-http-equiv">http-equiv</code>.</p>
<p>The <dfn attribute for="HTMLMetaElement"><code data-x="dom-meta-name">name</code></dfn>, <dfn
attribute for="HTMLMetaElement"><code data-x="dom-meta-content">content</code></dfn>, and <dfn
attribute for="HTMLMetaElement"><code data-x="dom-meta-media">media</code></dfn> IDL attributes
must <span>reflect</span> the respective content attributes of the same name. The IDL attribute
<dfn attribute for="HTMLMetaElement"><code data-x="dom-meta-httpEquiv">httpEquiv</code></dfn> must
<span>reflect</span> the content attribute <code
data-x="attr-meta-http-equiv">http-equiv</code>.</p>

</div>

Expand Down Expand Up @@ -14278,10 +14287,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 +14303,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">
<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>

<div w-nodev>

<p>To obtain a page's theme color, user agents must run the following steps:</p>
Expand All @@ -14315,6 +14337,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
Copy Markdown
Member

@annevk annevk Apr 20, 2021

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
Copy Markdown
Member

@gsnedders gsnedders Apr 21, 2021

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
Copy Markdown
Member

@annevk annevk Apr 21, 2021

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
Copy Markdown
Contributor Author

@hober hober Apr 22, 2021

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
Copy Markdown
Contributor Author

@hober hober Apr 22, 2021

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.

<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 +14359,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 @@ -119418,7 +119448,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 +121124,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 +123873,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