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

For technical support and bug reports for all editions of CSS HTML Validator, including htmlval for Linux and Mac.
TomHTML
Rank III - Intermediate
Posts: 75
Joined: Sun Feb 04, 2018 10:19 am

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

Post 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!
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

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

Post 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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
TomHTML
Rank III - Intermediate
Posts: 75
Joined: Sun Feb 04, 2018 10:19 am

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

Post 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
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

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

Post 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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

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

Post 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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
TomHTML
Rank III - Intermediate
Posts: 75
Joined: Sun Feb 04, 2018 10:19 am

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

Post by TomHTML »

Thanks so much!