Skip to content

Commit

Permalink
Define media="" on <meta name="theme-color">
Browse files Browse the repository at this point in the history 
Closes #6495.
  • Loading branch information
@hober
hober authored Jun 23, 2021
1 parent 524485a commit cf222a3
Showing 1 changed file with 46 additions and 13 deletions.
59 changes: 46 additions & 13 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14035,6 +14035,7 @@ interface <dfn interface>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 @@ -14048,6 +14049,7 @@ interface <dfn interface>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 @@ -14102,14 +14104,21 @@ interface <dfn interface>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 @@ -14367,10 +14376,10 @@ interface <dfn interface>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 @@ -14383,6 +14392,19 @@ interface <dfn interface>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 @@ -14404,6 +14426,11 @@ interface <dfn interface>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>

<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 @@ -14421,8 +14448,11 @@ interface <dfn interface>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 @@ -120527,7 +120557,8 @@ interface <dfn interface>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 @@ -122202,6 +122233,7 @@ interface <dfn interface>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 @@ -124938,6 +124970,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

0 comments on commit cf222a3

Please sign in to comment.