[go: nahoru, domu]
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

Jump to bottom

Import condition #7658

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

Import condition #7658

Changes from 1 commit
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
Prev Previous commit
Use media query lists in non-link media attributes
  • Loading branch information
@mirisuzanne
mirisuzanne committed Jul 18, 2023
commit ff457c8de17f388acca285f557d894ae0c32fe76
42 changes: 29 additions & 13 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3278,6 +3278,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
</ul>
</dd>

<dt>Media Queries</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>
</dd>

<dt>CSS Import Conditions</dt>

Expand Down Expand Up @@ -6532,8 +6539,17 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute

</div>

<h4 id="mq">Media queries</h4>

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

<h4 id="import-conditions"><span id="mq"></span>Import Conditions</h4>
<h4 id="import-conditions">Import Conditions</h4>

<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>.
Expand Down Expand Up @@ -14451,7 +14467,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 import condition</span>.
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>
Expand Down Expand Up @@ -15608,7 +15624,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 import condition</span>.
says which media the styles apply to. The value must be a <span>valid media query list</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 @@ -26863,7 +26879,7 @@ 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 import condition</span>.
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
not <span data-x="matches the environment">match the environment</span>.</p>

Expand Down Expand Up @@ -28193,7 +28209,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;import-condition></span> (the part in
attribute, using the first item with a <span>&lt;media-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 @@ -28230,7 +28246,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 import condition
<p>The user agent will choose the first <code>source</code> element for which the media query
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 @@ -28477,15 +28493,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;import-condition></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-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;import-condition></span>s.</p>
<span>&lt;media-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 @@ -29721,9 +29737,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;import-condition></span>.
as a <span>&lt;media-condition></span>.
If it does not parse correctly,
or it does parse correctly but the <span>&lt;import-condition></span> evaluates to false,
or it does parse correctly but the <span>&lt;media-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 @@ -29733,7 +29749,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;import-condition></span>)
(without an accompanying <span>&lt;media-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 @@ -115246,7 +115262,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 an import condition <span>matches the environment</span>.) <ref
affect whether a media query list <span>matches the environment</span>.) <ref
spec=CSSDEVICEADAPT></li>
</ul>
</li>
Expand Down Expand Up @@ -124416,7 +124432,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 import condition</span>
<td> <span>Valid import condition or media query list</span>
<tr>
<th> <code data-x="">method</code>
<td> <code data-x="attr-fs-method">form</code>
Expand Down