Whitespace is not insignificant in HTMLImageElement.srcset

[ripmurdock]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset

What specific section or headline is this issue about?

Value

What information was incorrect, unhelpful, or incomplete?

Hi,

This information appears to be incorrect: Space characters, other than the whitespace separating the URL and the corresponding condition descriptor, are ignored; this includes both leading and trailing space, as well as space before or after each comma.

I found that Firefox and codepen require spaces after each comma, while Chrome and Edge ignore these spaces.

Thanks

What did you expect to see?

I expected srcset to work in Firefox without spaces after the commas.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

* Folder: `en-us/web/api/htmlimageelement/srcset` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/htmlimageelement/srcset/index.md * Last commit: https://github.com/mdn/content/commit/e9e2ec643ac69c132f31427a0b586ab2cf83ed58 * Document last modified: 2024-07-26T02:56:30.000Z

[Josh-Cena]

Firefox and codepen require spaces after each comma

It is impossible for codepen, which is not a browser, to require anything.

Do you have a reproduction?

[ripmurdock]

Even more confusing this codepen with no spaces after the commas fails to load the images when opened in Chrome and Edge, and successfully loads the images in Firefox: https://codepen.io/ripmurdock/pen/gONvOgB

On the live site, Firefox failed to load the images with no spaces, and Chrome and Edge ignored the spaces.

The codepen with spaces successfully loads the images in all three browsers: https://codepen.io/ripmurdock/pen/mdZXdRj

One other stackoverflow user replicated the space after the comma issue in codepen here: https://stackoverflow.com/questions/78880873/firefox-fails-to-load-picture-elements-with-srcset-while-chrome-and-edge-succes?noredirect=1#comment139077137_78880873

Any insight into what's going on or the requirements for the srcset attribute would be welcome.

Thanks

On Sat, Aug 17, 2024 at 9:02 AM Joshua Chen @.***> wrote:

Firefox and codepen require spaces after each comma

It is impossible for codepen, which is not a browser, to require anything.

Do you have a reproduction?

— Reply to this email directly, view it on GitHub https://github.com/mdn/content/issues/35492#issuecomment-2294899492, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARZJ4U7CHHU4MXQPUCYF3I3ZR5XYBAVCNFSM6AAAAABMVQRI7CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJUHA4TSNBZGI . You are receiving this because you authored the thread.Message ID: @.***>

[Josh-Cena]

The problem is that the comma itself is a valid character in URLs. Therefore, https://casadeveronica.com/wp-content/uploads/2024/08/01-04-Chili-Con-Queso-Table-Widest-Angle-WebP-50-h-768-003.webp,https://casadeveronica.com/wp-content/uploads/2024/08/01-02-Chili-Con-Queso-Table-Widest-Angle-WebP-50-h-1728-003.webp 2x actually does not represent two URLs, but one called https://casadeveronica.com/wp-content/uploads/2024/08/01-04-Chili-Con-Queso-Table-Widest-Angle-WebP-50-h-768-003.webp,https://casadeveronica.com/wp-content/uploads/2024/08/01-02-Chili-Con-Queso-Table-Widest-Angle-WebP-50-h-1728-003.webp with a descriptor of 2x.

When we say "white space is ignored", it doesn't mean that removing them will maintain the same behavior. It means they won't be included as value, such as becoming part of a descriptor or URL. White space is still critical for disambiguation. Nevertheless, I think we should rewrite this page since we should make https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset the only source of truth and move most of the information on this page away.

[ripmurdock]

Thanks.

As an aside, there were a couple of points included in this article: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

That weren't clear to me from this article: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Specifically, browsers divide the w units in the srcset attribute by the device's pixel density, and if the sizes attribute is omitted, 100vw is the assumed.

I was trying to figure out how to have browsers pick a file based on a device's screen height * pixel density.

Because srcset doesn't allow h units, I opted for the picture element/media query/srcset with x units combination above.

Am I missing a more compact syntax to select a file based on height * pixel density?

Thanks again.

On Sat, Aug 17, 2024 at 1:39 PM Joshua Chen @.***> wrote:

The problem is that the comma itself is a valid character in URLs. Therefore, https://casadeveronica.com/wp-content/uploads/2024/08/01-04-Chili-Con-Queso-Table-Widest-Angle-WebP-50-h-768-003.webp,https://casadeveronica.com/wp-content/uploads/2024/08/01-02-Chili-Con-Queso-Table-Widest-Angle-WebP-50-h-1728-003.webp 2x actually does not represent two URLs, but one called https://casadeveronica.com/wp-content/uploads/2024/08/01-04-Chili-Con-Queso-Table-Widest-Angle-WebP-50-h-768-003.webp,https://casadeveronica.com/wp-content/uploads/2024/08/01-02-Chili-Con-Queso-Table-Widest-Angle-WebP-50-h-1728-003.webp with a descriptor of 2x.

When we say "white space is ignored", it doesn't mean that removing them will maintain the same behavior. It means they won't be included as value, such as becoming part of a descriptor or URL. White space is still critical for disambiguation. Nevertheless, I think we should rewrite this page since we should make https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset the only source of truth and move most of the information on this page away.

— Reply to this email directly, view it on GitHub https://github.com/mdn/content/issues/35492#issuecomment-2294979810, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARZJ4U7YEJJ425LLX7VOFCDZR6YJLAVCNFSM6AAAAABMVQRI7CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJUHE3TSOBRGA . You are receiving this because you authored the thread.Message ID: @.***>