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

Import condition #7658

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

Import condition #7658

Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a7974fa
Update media attribute to support all import conditions
mirisuzanne Feb 14, 2022
679fe46
Merge branch 'whatwg:main' into import-condition
mirisuzanne Feb 24, 2022
a02d7ef
Merge branch 'whatwg:main' into import-condition
mirisuzanne Mar 14, 2022
e8275b5
Update media-contition references so they point to import-condition
mirisuzanne Mar 14, 2022
5d9d2de
Plural import conditions
mirisuzanne Jul 18, 2023
011aca7
Revert statement of fact
mirisuzanne Jul 18, 2023
ff457c8
Use media query lists in non-link media attributes
mirisuzanne Jul 18, 2023
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
55 changes: 28 additions & 27 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1458,8 +1458,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<p>Certain restrictions are intended to support the restrictions made by other
specifications.</p>

<p class="example">For example, requiring that attributes that take media query lists use only
<em>valid</em> media query lists reinforces the importance of following the conformance rules of
<p class="example">For example, requiring that attributes that take import conditions use only
<em>valid</em> import conditions reinforces the importance of following the conformance rules of
that specification.</p>
</dd>
</dl>
Expand Down Expand Up @@ -3279,12 +3279,12 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
</dd>


<dt>Media Queries</dt>
<dt>CSS Import Conditions</dt>

<dd>
<p>Implementations must support <cite>Media Queries</cite>. The <dfn
data-x-href="https://drafts.csswg.org/mediaqueries/#typedef-media-condition">&lt;media-condition></dfn>
feature is defined therein. <ref spec=MQ></p>
<p>Implementations must support CSS import conditions, defined in <cite>CSS Cascade</cite> as the <dfn
data-x-href="https://drafts.csswg.org/css-cascade/#typedef-import-condition">&lt;import-condition></dfn>
feature. <ref spec=CSSCASCADE></p>
</dd>


Expand Down Expand Up @@ -6533,15 +6533,16 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
</div>


<h4 id="mq">Media queries</h4>
<h4 id="import-condition"><span id="mq"></span>Import Condition</h4>
mirisuzanne marked this conversation as resolved.
Show resolved Hide resolved

<p>A string is a <dfn>valid media query list</dfn> if it matches the <code
data-x="">&lt;media-query-list&gt;</code> production of <cite>Media Queries</cite>. <ref spec=MQ></p>
<p>A string is a <dfn>valid import condition</dfn> if it matches the <code
data-x="">&lt;import-condition&gt;</code> production of <cite>CSS Cascade and Inheritance</cite>.
<ref spec=CSSCASCADE></p>

<p>A string <dfn>matches the environment</dfn> of the user if it is the empty string, a string
consisting of only <span>ASCII whitespace</span>, or is a media query list that matches the user's
environment according to the definitions given in <cite>Media Queries</cite>. <ref
spec=MQ></p>
consisting of only <span>ASCII whitespace</span>, or is an import condition that matches the user's
environment according to the definitions given in <cite>CSS Cascade and Inheritance</cite>. <ref
spec=CSSCASCADE></p>



Expand Down Expand Up @@ -13788,8 +13789,7 @@ interface <dfn interface>HTMLLinkElement</dfn> : <span>HTMLElement</span> {
data-x="external resource link">external resource links</span>.</p>

<p>The <dfn element-attr for="link"><code data-x="attr-link-media">media</code></dfn> attribute
says which media the resource applies to. The value must be a <span>valid media query
list</span>.</p>
says which media the resource applies to. The value must be a <span>valid import condition</span>.</p>
Copy link
Member

Choose a reason for hiding this comment

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

Should we update "says which media the resource applies to"? I'm personally not sure. The sentence here is supposed to be a statement of fact so it doesn't need to be super-accurate. But I feel like with the new value space maybe the current sentence becomes inaccurate?


<p>The <dfn for="link" element-attr><code data-x="attr-link-integrity">integrity</code></dfn>
attribute represents the <span data-x="concept-request-integrity-metadata">integrity
Expand Down Expand Up @@ -14450,7 +14450,7 @@ interface <dfn interface>HTMLMetaElement</dfn> : <span>HTMLElement</span> {
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>.
says which media the metadata applies to. The value must be a <span>valid import condition</span>.
Copy link
Member

Choose a reason for hiding this comment

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

So to double-check, do we have implementer buy-in for changing not only link and style, but also meta and source? I think it's best if we change them all, for consistency. But it is extra work, and some implementers might not be excited about doing that extra work so that you can do conditional meta theme colors.

Copy link
Author

Choose a reason for hiding this comment

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

The layer syntax would only have meaning in the link & style elements - and is only needed on the former (the CSS syntax can be used directly inside style). Other import conditions, such as support queries, may be useful on all three. We could narrow the scope of this PR to only the essential change, and expand later if desired?

Copy link
Member

Choose a reason for hiding this comment

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

What do implementers want to do here?

Even for the link element, media can be specified and is processed for preload in addition to stylesheet. Do we want to check the value of the as attribute for preloads and decide between media query list or import condition, or always treat as import condition for link?

For images, videos, and <meta name=theme-color>, I think it doesn't make much sense to support supports() since they don't import CSS stylesheets, but I don't feel strongly about it.

We also have the Link HTTP header which per spec seems to always process the media header attribute regardless of rel (https://html.spec.whatwg.org/multipage/semantics.html#process-link-headers step 5). Link supports preconnect and preload rels per spec (not stylesheet).

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>
Expand Down Expand Up @@ -15607,7 +15607,7 @@ interface <dfn interface>HTMLStyleElement</dfn> : <span>HTMLElement</span> {
user.</p>

<p>The <dfn element-attr for="style"><code data-x="attr-style-media">media</code></dfn> attribute
says which media the styles apply to. The value must be a <span>valid media query list</span>.
says which media the styles apply to. The value must be a <span>valid import condition</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
Expand Down Expand Up @@ -26862,8 +26862,8 @@ interface <dfn interface>HTMLSourceElement</dfn> : <span>HTMLElement</span> {
the <span>source set</span>, if the <code>source</code> element is selected.</p>

<p>The <dfn element-attr for="source" data-x="attr-source-media"><code>media</code></dfn>
attribute may also be present. If present, the value must contain a <span>valid media query
list</span>. The user agent will skip to the next <code>source</code> element if the value does
attribute may also be present. If present, the value must contain a <span>valid import condition</span>.
The user agent will skip to the next <code>source</code> element if the value does
not <span data-x="matches the environment">match the environment</span>.</p>

<p>The <code>source</code> element supports <span>dimension attributes</span>. The
Expand Down Expand Up @@ -28192,7 +28192,7 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
exactly with the actual image width as specified in the CSS.</p>

<p>The user agent will pick a width from the <code data-x="attr-img-sizes">sizes</code>
attribute, using the first item with a <span>&lt;media-condition></span> (the part in
attribute, using the first item with a <span>&lt;import-condition></span> (the part in
parentheses) that evaluates to true, or using the last item (<code data-x="">calc(33vw -
100px)</code>) if they all evaluate to false.</p>

Expand Down Expand Up @@ -28229,7 +28229,7 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
&lt;img src="small.jpg" alt="The wolf runs through the snow.">
&lt;/picture></code></pre>

<p>The user agent will choose the first <code>source</code> element for which the media query
<p>The user agent will choose the first <code>source</code> element for which the import condition
in the <code data-x="attr-source-media">media</code> attribute matches, and then choose an
appropriate URL from its <code data-x="attr-source-srcset">srcset</code> attribute.</p>

Expand Down Expand Up @@ -28476,15 +28476,15 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
<ref spec=CSSVALUES> <ref spec=MQ></p>

<pre><code class="html"><dfn>&lt;source-size-list></dfn> = [ <span>&lt;source-size></span># , ]? <span>&lt;source-size-value></span>
<dfn>&lt;source-size></dfn> = <span>&lt;media-condition></span> <span>&lt;source-size-value></span>
<dfn>&lt;source-size></dfn> = <span>&lt;import-condition></span> <span>&lt;source-size-value></span>
<dfn>&lt;source-size-value></dfn> = <span>&lt;length></span></code></pre>

<p>A <span>&lt;source-size-value></span> must not be negative, and must not use CSS functions
other than the <span>math functions</span>.</p>

<p>The <span>&lt;source-size-value></span> gives the intended layout width of the image. The
author can specify different widths for different environments with
<span>&lt;media-condition></span>s.</p>
<span>&lt;import-condition></span>s.</p>

<p class="note">Percentages are not allowed in a <span>&lt;source-size-value></span>,
to avoid confusion about what it would be relative to.
Expand Down Expand Up @@ -29720,9 +29720,9 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
that is a <span data-x="concept-microsyntax-parse-error">parse error</span>.</p></li>

<li><p>Parse the remaining <span data-x="component value">component values</span> in <var>unparsed size</var>
as a <span>&lt;media-condition></span>.
as a <span>&lt;import-condition></span>.
If it does not parse correctly,
or it does parse correctly but the <span>&lt;media-condition></span> evaluates to false,
or it does parse correctly but the <span>&lt;import-condition></span> evaluates to false,
<span>continue</span>. <ref spec=MQ></p></li>

<li><p>Return <var>size</var> and exit this algorithm.</p></li>
Expand All @@ -29732,7 +29732,7 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
<var>size</var> value, then return <code data-x="">100vw</code>.</p>

<p class="note">While a <span>valid source size list</span> only contains a bare <span>&lt;source-size-value></span>
(without an accompanying <span>&lt;media-condition></span>)
(without an accompanying <span>&lt;import-condition></span>)
as the last entry in the <span>&lt;source-size-list></span>,
the parsing algorithm technically allows such at any point in the list,
and will accept it immediately as the size
Expand Down Expand Up @@ -115245,7 +115245,7 @@ document.body.appendChild(text);

<li>A <code>meta</code> element whose <code data-x="attr-meta-name">name</code> attribute is an
<span>ASCII case-insensitive</span> match for "<code data-x="">viewport</code>". (This can
affect whether a media query list <span>matches the environment</span>.) <ref
affect whether an import condition <span>matches the environment</span>.) <ref
spec=CSSDEVICEADAPT></li>
</ul>
</li>
Expand Down Expand Up @@ -124415,7 +124415,7 @@ interface <dfn interface>External</dfn> {
<code data-x="attr-source-media">source</code> (in <code>picture</code>);
<code data-x="attr-style-media">style</code>
<td> Applicable media
<td> <span>Valid media query list</span>
<td> <span>Valid import condition</span>
<tr>
<th> <code data-x="">method</code>
<td> <code data-x="attr-fs-method">form</code>
Expand Down Expand Up @@ -127686,6 +127686,7 @@ INSERT INTERFACES HERE
Mike Shaver,
Mikko Rantalainen,
Mingye Wang,
Miriam Suzanne,
Mohamed Zergaoui<!-- Innovimax SARL -->,
Mohammad Al Houssami,
Mohammad Reza Zakerinasab,
Expand Down