Skip to content

Commit

Permalink
Add conformance requirements and example for imagesizes/imagesrcset
Browse files Browse the repository at this point in the history 
Closes whatwg#5604.

This also fixes nearby double-negatives for other link attributes.
  • Loading branch information
@domenic @mfreed7
domenic authored and mfreed7 committed Sep 11, 2020
1 parent 485cd3e commit 5e19616
Showing 1 changed file with 68 additions and 14 deletions.
82 changes: 68 additions & 14 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13108,11 +13108,15 @@ interface <dfn>HTMLLinkElement</dfn> : <span>HTMLElement</span> {

<p>The <code>link</code> element allows authors to link their document to other resources.</p>

<p>The destination of the link(s) is given by the <dfn><code
data-x="attr-link-href">href</code></dfn> attribute, which must be present and must contain a
<span>valid non-empty URL potentially surrounded by spaces</span>. <span w-nodev>If the <code
data-x="attr-link-href">href</code> attribute is absent, then the element does not define a
link.</span></p>
<p>The address of the link(s) is given by the <dfn><code data-x="attr-link-href">href</code></dfn>
attribute. If the <code data-x="attr-link-href">href</code> attribute is present, then its value
must be a <span>valid non-empty URL potentially surrounded by spaces</span>. One or both of the
<code data-x="attr-link-href">href</code> or <code
data-x="attr-link-imagesrcset">imagesrcset</code> attributes must be present.</p>

<p w-nodev>If both the <code data-x="attr-link-href">href</code> and <code
data-x="attr-link-imagesrcset">imagesrcset</code> attributes are absent, then the element does not
define a link.</p>

<p>The <dfn><code data-x="attr-link-crossorigin">crossorigin</code></dfn> attribute is a
<span>CORS settings attribute</span>. It is intended for use with <span data-x="external resource
Expand Down Expand Up @@ -13173,7 +13177,7 @@ interface <dfn>HTMLLinkElement</dfn> : <span>HTMLElement</span> {
the microdata model.</p>

<p>Two categories of links can be created using the <code>link</code> element: <span
data-x="external resource link">Links to external resources</span> and <span
data-x="external resource link">links to external resources</span> and <span
data-x="hyperlink">hyperlinks</span>. The <a href="#linkTypes">link types section</a> defines
whether a particular link type is an external resource or a hyperlink. One <code>link</code>
element can create multiple links (of which some might be <span data-x="external resource
Expand Down Expand Up @@ -13256,6 +13260,8 @@ interface <dfn>HTMLLinkElement</dfn> : <span>HTMLElement</span> {
elements in that a link without a title does not inherit the title of the parent element: it
merely has no title.</p>

<hr>

<p>The <dfn><code data-x="attr-link-imagesrcset">imagesrcset</code></dfn> attribute may be
present, and is a <span>srcset attribute</span>.</p>

Expand All @@ -13271,6 +13277,54 @@ interface <dfn>HTMLLinkElement</dfn> : <span>HTMLElement</span> {
data-x="attr-link-imagesizes">imagesizes</code> attribute contributes the <span>source size</span>
to the <span>source set</span>.</p>

<p>The <code data-x="attr-link-imagesrcset">imagesrcset</code> and <code
data-x="attr-link-imagesizes">imagesizes</code> attributes must only be specified on
<code>link</code> elements that have both a <code data-x="attr-link-rel">rel</code> attribute that
specifies the <code data-x="rel-preload">preload</code> keyword, as well as an <code
data-x="attr-link-as">as</code> attribute in the "<code data-x="">image</code>" state.</p>

<div class="example">
<p>These attributes allow preloading the appropriate resource that is later used by an
<code>img</code> element that has the corresponding values for its <code
data-x="attr-img-srcset">srcset</code> and <code data-x="attr-img-sizes">sizes</code>
attributes:</p>

<pre><code class="html" data-x="">&lt;link rel="preload" as="image"
imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
imagesizes="50vw">

&lt;!-- ... later, or perhaps inserted dynamically ... -->
&lt;img src="wolf.jpg" alt="A rad wolf"
srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
sizes="50vw"></code></pre>

<p>Note how we omit the <code data-x="attr-link-href">href</code> attribute, as it would only
be relevant for browsers that do not support <code
data-x="attr-link-imagesrcset">imagesrcset</code>, and in those cases it would likely cause the
incorrect image to be preloaded.</p>
</div>

<div class="example">
<p>The <code data-x="attr-link-imagesrcset">imagesrcset</code> attribute can be combined with the
<code data-x="attr-link-media">media</code> attribute to preload the appropriate resource
selected from a <code>picture</code> element's sources, for <span>art direction</span>:</p>

<pre><code class="html" data-x="">&lt;link rel="preload" as="image"
imagesrcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
media="(max-width: 800px)">
&lt;link rel="preload" as="image"
imagesrcset="dog-wide-1x.jpg, dog-wide-2x.jpg 2x"
media="(min-width: 801px)">

&lt;!-- ... later, or perhaps inserted dynamically ... -->
&lt;picture>
&lt;source srcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
media="(max-width: 800px)">
&lt;img src="dog-wide-1x.jpg" srcset="dog-wide-2x.jpg 2x"
alt="An awesome dog">
&lt;/picture></code></pre>
</div>

<hr>

<p>The <dfn><code data-x="attr-link-sizes">sizes</code></dfn> attribute gives the sizes of icons
Expand All @@ -13282,7 +13336,7 @@ interface <dfn>HTMLLinkElement</dfn> : <span>HTMLElement</span> {
value that consists of two <span data-x="valid non-negative integer">valid non-negative
integers</span> that do not have a leading U+0030 DIGIT ZERO (0) character and that are separated
by a single U+0078 LATIN SMALL LETTER X or U+0058 LATIN CAPITAL LETTER X character. The attribute
must not be specified on <code>link</code> elements that do not have a <code
must only be specified on <code>link</code> elements that have a <code
data-x="attr-link-rel">rel</code> attribute that specifies the <code data-x="rel-icon">icon</code>
keyword or the <code data-x="">apple-touch-icon</code> keyword.</p>

Expand Down Expand Up @@ -13319,9 +13373,9 @@ interface <dfn>HTMLLinkElement</dfn> : <span>HTMLElement</span> {
<hr>

<p>The <dfn><code data-x="attr-link-color">color</code></dfn> attribute is used with the <code
data-x="">mask-icon</code> link type. The attribute must not be specified on <code>link</code>
elements that do not have a <code data-x="attr-link-rel">rel</code> attribute that contains the
<code data-x="">mask-icon</code> keyword. The value must be a string that matches the CSS
data-x="">mask-icon</code> link type. The attribute must only be specified on <code>link</code>
elements that have a <code data-x="attr-link-rel">rel</code> attribute that contains the <code
data-x="">mask-icon</code> keyword. The value must be a string that matches the CSS
<span>&lt;color></span> production, defining a suggested color that user agents can use to
customize the display of the icon that the user sees when they pin your site.</p>

Expand All @@ -13339,7 +13393,7 @@ interface <dfn>HTMLLinkElement</dfn> : <span>HTMLElement</span> {

<p>The <dfn><code data-x="attr-link-disabled">disabled</code></dfn> attribute is a <span>boolean
attribute</span> that is used with the <code data-x="rel-stylesheet">stylesheet</code> link type.
The attribute must not be specified on <code>link</code> elements that do not have a <code
The attribute must only be specified on <code>link</code> elements that have a <code
data-x="attr-link-rel">rel</code> attribute that contains the <code
data-x="rel-stylesheet">stylesheet</code> keyword.</p>

Expand Down Expand Up @@ -119511,12 +119565,12 @@ interface <dfn>External</dfn> {
<tr>
<th> <code data-x="">imagesizes</code>
<td> <code data-x="attr-link-imagesizes">link</code>
<td> Image sizes for different page layouts
<td> Image sizes for different page layouts (for <code data-x="attr-link-rel">rel</code>="<code data-x="rel-preload">preload</code>")
<td> <span>Valid source size list</span>
<tr>
<th> <code data-x="">imagesrcset</code>
<td> <code data-x="attr-link-imagesrcset">link</code>
<td> Images to use in different situations (e.g., high-resolution displays, small monitors, etc.)
<td> Images to use in different situations, e.g., high-resolution displays, small monitors, etc. (for <code data-x="attr-link-rel">rel</code>="<code data-x="rel-preload">preload</code>")
<td> Comma-separated list of <span data-x="image candidate string">image candidate strings</span>
<tr>
<th> <code data-x="">inputmode</code>
Expand Down Expand Up @@ -119930,7 +119984,7 @@ interface <dfn>External</dfn> {
<th> <code data-x="">srcset</code>
<td> <code data-x="attr-img-srcset">img</code>;
<code data-x="attr-source-srcset">source</code>
<td> Images to use in different situations (e.g., high-resolution displays, small monitors, etc.)
<td> Images to use in different situations, e.g., high-resolution displays, small monitors, etc.
<td> Comma-separated list of <span data-x="image candidate string">image candidate strings</span>
<tr>
<th> <code data-x="">start</code>
Expand Down

0 comments on commit 5e19616

Please sign in to comment.