Bug: media query value for "sizes" attribute of <source> element not recognized
Posted: Wed Jan 25, 2023 12:19 pm
The new (2023) version of the validator does not accept a media query for the "sizes" attribute of a <source> element.
For example:
According to the MDN link in error message in the validator,
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!
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>
The MDN article then shows example code with a typical media query in the sizes attribute:Each condition is specified using the same conditional format used by media queries.
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 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!