Add conformance requirements and example for imagesizes/imagesrcset #5606

domenic · 2020-06-04T21:31:40Z

Closes #5604.

This also fixes nearby double-negatives for other link attributes.

/cc @schalkneethling @whatwg/documentation @sideshowbarker

/indices.html ( diff )
/semantics.html ( diff )

Closes #5604. This also fixes nearby double-negatives for other link attributes.

schalkneethling

Thank you so much for making this update @domenic 👍 One question around the use of the picture element. Other than that, this is a great update.

schalkneethling · 2020-06-05T06:46:12Z

source

+&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>
+  </div>


Could this also be used with the picture element's source? If so, then the wording above needs to change a bit to indicate that it can be used in conjunction with the img and picture elements.

Good point. @yoavweiss @domfarolino can you confirm that imagesrcset/imagesizes works for picture source elements too?

They do. An example:

<link rel=preload as=image imagesrcset="cropped_400.jpg 400w, cropped_800.jpg 800w ..." media=" (max-width: 800)"> <link rel=preload as=image imagesrcset="wide_400.jpg 400w, wide_800.jpg 800w ..." media="(min-width: 801)"> <picture> <source srcset="cropped..." media="(max-width: 800px)"> <img srcset="wide..."> </picture>

They could similarly be used for format selection, but in this case, only 1 preload would make sense (probably with the most likely-to-be supported format)

Very interesting. I notice your example does not use the href="" attribute. Should we update the conformance requirements to allow omitting href=""?? That'd be a fairly big change, but it appears that the processing model does allow for it...

After working through your example below, I've pushed a commit that update's link's conformance requirements to allow either imagesrcset or href. I also added an example similar to yours (but using density instead of width).

Please take a look; this change has gotten a good deal bigger in scope, and will be a great improvement if I managed to line everything up.

source

yoavweiss

LGTM

annevk

Removal of double negative is nice!

annevk · 2020-06-10T09:27:58Z

source

+  present. The exception is if the <code data-x="attr-link-imagesrcset">imagesrcset</code> attribute
+  is present; in that case the <code data-x="attr-link-href">href</code> attribute may be omitted.
+  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>.</p>


Should we reword this to require either the href or imagesrcset attribute and perhaps not talk about the destination of the link at all? At least from a quick search we mostly use destination to mean a request's destination field and we don't seem to refer to this concept anywhere (it's also not a dfn).

I think we should still have a definition for the href attribute... although I guess a/anchor do not really have one: https://html.spec.whatwg.org/#attr-hyperlink-href. The non-normative attribute description for a is the "address of the hyperlink". Hmm... I'll just change it to s/destination/address for now?

annevk · 2020-06-10T09:35:09Z

source

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


Suggested change

<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> Images to use in different situations (e.g., high-resolution displays and small monitors; for <code data-x="attr-link-rel">rel</code>="<code data-x="rel-preload">preload</code>")

I did something slightly different here; let me know what you think

Part of the problem here (and I guess below) is having both e.g. and etc. so I think we still need to make that change.

What's the problem with having both e.g. and etc.?

Examples are by definition a limited set. So making it an unlimited set again with etc. is weird at best.

It seems fine to note that there are more examples beyond the two given here. Note that this is a preexisting pattern in the HTML spec...

I'm OK changing this but I would prefer not to, since it makes sense to me as-is and is a preexisting pattern in the spec.

annevk · 2020-06-11T12:28:30Z

source

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


Part of the problem here (and I guess below) is having both e.g. and etc. so I think we still need to make that change.

annevk · 2020-06-11T12:29:35Z

source

@@ -13043,7 +13043,7 @@ 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
+  <p>The address of the link(s) is given by the <dfn><code


What does it mean for a link element to have an address though? And what does it mean to lack it? If nothing is tied to this, I'm not sure why we say it. And it would be much clearer conformance-wise to say that a link element must have either an href or imagesrcset attribute specified.

We say it because IMO it's important to define what href means. If the only "definition" of href is that it or imagesizes must occur, that doesn't give the reader any idea what href is, which is bad.

We don't always define attributes, it's true. But I think we should.

Maybe then "The URLs of the other resources are given by the href and imagesrcset attributes. Either the href or imagesrcset attribute must be specified." (This ties it back to the definition of the link element.)

That sounds like a reasonable direction. Although what do you mean by "other" resources? Can it just be "the URL of the resource linked"?

Yeah, since the contrast with document is gone "other" isn't needed. You do need to allow for plural though because of srcset.

Sigh, OK, I tried this and I don't like it for two reasons:

This section defines href, whereas the definition of imagesrcset and its conformance requirements is down below. So keeping this paragraph href focused, as I've done, works better in that context. We could try to move the definition and conformance requirements for imagesrcset up and merge them into this paragraph, but then it's disconnected from imagesizes, which causes its own problems.

You may want to specify both href and imagesrcset, so the wording in the PR is more correct than "Either the href or the imagesrcset attribute must be specified".

So should we then repeat this definition for imagesrcset below? It currently doesn't seem to have a definition. If you say href or imagesrcset must be specified it works per https://infra.spec.whatwg.org/#terminology.

The definition below is that it's a srcset attribute.

I agree that this is a bit inconsistent; defining something as "a srcset attribute" isn't as helpful as defining it as "the address of the link". (Because "a srcset attribute" links to a section that talks entirely about constraints on the attribute's value, instead of talking about what a srcset attribute means or represents.) However, I think this is a reasonable direction to go for now, in terms of making minimal changes.

I'll push a commit on using "or" instead of the current more long-winded phrasing.

domenic · 2020-07-07T21:58:13Z

@annevk ping on picking this back up, and letting me know how strongly you feel about the remaining points.

Add conformance requirements and example for imagesizes/imagesrcset

886ccd9

Closes #5604. This also fixes nearby double-negatives for other link attributes.

domenic added clarification Standard could be clearer document conformance topic: link impacts documentation Used by documentation communities, such as MDN, to track changes that impact documentation labels Jun 4, 2020

schalkneethling reviewed Jun 5, 2020

View reviewed changes

schalkneethling reviewed Jun 6, 2020

View reviewed changes

source Show resolved Hide resolved

domenic added 2 commits June 8, 2020 17:59

Add an example for picture

e4e5e31

Remove href and make it optional in conformance requirements

f8e04a7

yoavweiss approved these changes Jun 9, 2020

View reviewed changes

domenic requested review from annevk and zcorpan June 9, 2020 17:23

annevk reviewed Jun 10, 2020

View reviewed changes

Tweaks from review

f3b5f02

annevk reviewed Jun 11, 2020

View reviewed changes

"one or both", maybe?

638c4b7

annevk approved these changes Jul 8, 2020

View reviewed changes

schalkneethling approved these changes Jul 8, 2020

View reviewed changes

domenic merged commit c8e267a into master Jul 8, 2020

domenic deleted the imagelink branch July 8, 2020 17:52

schalkneethling mentioned this pull request Feb 22, 2021

imagesrcset and imagesizes on link element mdn/content#2586

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add conformance requirements and example for imagesizes/imagesrcset #5606

Add conformance requirements and example for imagesizes/imagesrcset #5606

domenic commented Jun 4, 2020 •

edited by pr-preview bot

Loading

schalkneethling left a comment

schalkneethling Jun 5, 2020

domenic Jun 5, 2020

yoavweiss Jun 8, 2020

domenic Jun 8, 2020

domenic Jun 8, 2020

yoavweiss left a comment

annevk left a comment

annevk Jun 10, 2020

domenic Jun 10, 2020

annevk Jun 10, 2020

domenic Jun 10, 2020

annevk Jun 11, 2020

domenic Jun 11, 2020

annevk Jun 11, 2020

domenic Jun 11, 2020

domenic Jul 7, 2020

annevk Jun 11, 2020

annevk Jun 11, 2020

domenic Jun 11, 2020

annevk Jun 11, 2020 •

edited

Loading

domenic Jun 11, 2020

annevk Jun 11, 2020

domenic Jun 11, 2020 •

edited

Loading

annevk Jun 11, 2020

domenic Jun 11, 2020

domenic Jul 7, 2020

domenic commented Jul 7, 2020

	<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> Images to use in different situations (e.g., high-resolution displays and small monitors; for <code data-x="attr-link-rel">rel</code>="<code data-x="rel-preload">preload</code>")

Add conformance requirements and example for imagesizes/imagesrcset #5606

Add conformance requirements and example for imagesizes/imagesrcset #5606

Conversation

domenic commented Jun 4, 2020 • edited by pr-preview bot Loading

schalkneethling left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yoavweiss left a comment

Choose a reason for hiding this comment

annevk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

annevk Jun 11, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

domenic Jun 11, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

domenic commented Jul 7, 2020

domenic commented Jun 4, 2020 •

edited by pr-preview bot

Loading

annevk Jun 11, 2020 •

edited

Loading

domenic Jun 11, 2020 •

edited

Loading