Page 1 of 1

Bug: media query value for "sizes" attribute of <source> element not recognized

Posted: Wed Jan 25, 2023 12:19 pm
by TomHTML
The new (2023) version of the validator does not accept a media query for the "sizes" attribute of a <source> element.

For example:

Code: Select all

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Srcset Sizes Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<figure>
	<picture>
	<source srcset="image-344px.webp 344w, image-560px.webp 560w, image-824px.webp 824w, image-918px.webp 918w, image-1084px.webp 1084w, image-1254px.webp 1254w" type="image/webp" sizes="(max-width: 727px) 87vw, ((min-width: 727px) and (max-width: 1131px)) calc((87vw - 4.5em) / 2), (min-width: 1131px) calc((87vw - 9em) / 3)">
	<source srcset="image-344px.jpg 344w, image-560px.jpg 560w, image-824px.jpg 824w, image-918px.jpg 918w, image-1084px.jpg 1084w, image-1254px.jpg 1254w" type="image/jpeg" sizes="(max-width: 727px) 87vw, ((min-width: 727px) and (max-width: 1131px)) calc((87vw - 4.5em) / 2), (min-width: 1131px) calc((87vw - 9em) / 3)">
	<img src="image-1254px.jpg" alt="Navigate to Gallery" width="1254" height="1254">
	</picture>
</figure>

</body>
</html>
According to the MDN link in error message in the validator,
Each condition is specified using the same conditional format used by media queries.
The MDN article then shows example code with a typical media query in the sizes attribute:

Code: Select all

<img
    src="new-york-skyline-wide.jpg"
    srcset="
      new-york-skyline-wide.jpg 3724w,
      new-york-skyline-4by3.jpg 1961w,
      new-york-skyline-tall.jpg 1060w
    "
    sizes="((min-width: 50em) and (max-width: 60em)) 50em,
              ((min-width: 30em) and (max-width: 50em)) 30em,
              (max-width: 30em) 20em"
    alt="The New York City skyline on a beautiful day, with the One World Trade Center building in the middle." />
The sizes attribute in this MDN example code is also flagged as an error by the Validator.

The Nu HTML Checker accepts both the MDN html and my html as valid regarding the sizes attribute.

Please advise...and many thanks for your wonderful work with the validator!

Re: Bug: media query value for "sizes" attribute of <source> element not recognized

Posted: Wed Jan 25, 2023 4:33 pm
by Albert Wiersch
Hi Tom,

The checking was updated in CSS HTML Validator 2023/v23 based on the spec here:
https://html.spec.whatwg.org/multipage/ ... attributes

Code: Select all

<source-size-list> = [ <source-size># , ]? <source-size-value>
<source-size> = <media-condition> <source-size-value>
<source-size-value> = <length>
MDN says the sizes value is "a string containing a comma-separated list of source size descriptors followed by an optional fallback size", which seemed to be valid based on a previous HTML5 spec, but the current HTML5 spec does not say that the fallback size is optional (see above).

Are you able to add a fallback <source-size-value> to the sizes values?

Any thoughts on this? I wonder if the fallback size is still optional and the HTML5 spec is wrong or has a typo.

Re: Bug: media query value for "sizes" attribute of <source> element not recognized

Posted: Wed Jan 25, 2023 7:16 pm
by TomHTML
Hmm, I've structured my media queries to be inclusive of all sizes, so in my case, the fallback value would never be accessed/needed.

I've raised the issue on their Github: https://github.com/whatwg/html/issues/8778

Re: Bug: media query value for "sizes" attribute of <source> element not recognized

Posted: Wed Jan 25, 2023 7:34 pm
by Albert Wiersch
TomHTML wrote: Wed Jan 25, 2023 7:16 pm Hmm, I've structured my media queries to be inclusive of all sizes, so in my case, the fallback value would never be accessed/needed.

I've raised the issue on their Github: https://github.com/whatwg/html/issues/8778
Excellent. Thank you for raising that issue. I've subscribed to it.

Re: Bug: media query value for "sizes" attribute of <source> element not recognized

Posted: Tue Jan 31, 2023 10:55 am
by Albert Wiersch
No response yet to the issue.

For now, I am going to have CSS HTML Validator generate a warning when the fallback value is omitted:
This value appears to be missing a fallback <source-size-value> which is required by the latest HTML5 specification (although this requirement is in question and it may be optional). Visit https://developer.mozilla.org/en-US/doc ... ment/sizes for more information.

So you can disable that warning if you wish to do so.

I will update it as soon as there is more clarity on the requirement.

This change was implemented in v23.0021.

Re: Bug: media query value for "sizes" attribute of <source> element not recognized

Posted: Tue Jan 31, 2023 11:20 am
by TomHTML
Thanks so much!