Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncertainty around support and validity of imagesrcset and imagesizes on link element #5604

Closed
schalkneethling opened this issue Jun 4, 2020 · 4 comments · Fixed by #5606
Assignees

Comments

@schalkneethling
Copy link
Contributor

schalkneethling commented Jun 4, 2020

From the HTML specification below, it seems that one can specify different images to be used based on viewport size or screen depth(using imagesrcset and imagesizes) as is common with the img element.

https://html.spec.whatwg.org/commit-snapshots/cb4f5ff75de5f4cbd7013c4abad02f21c77d4d1c/#the-link-element

NOTE: The same can be seen on the DEV version of the spec: https://html.spec.whatwg.org/dev/semantics.html#attr-link-imagesrcset

The imagesrcset attribute may be present, and is a srcset attribute.

The imagesrcset and href attributes (if width descriptors are not used) together contribute the image sources to the source set.

If the imagesrcset attribute is present and has any image candidate strings using a width descriptor, the imagesizes attribute must also be present, and is a sizes attribute. The imagesizes attribute contributes the source size to the source set.

As there is no example usage my assumption was that this is related to rel=icon i.e. specify different favicons for different viewports. Searching on caniuse there are currently no entries for either imagesrcet or imagesizes. The same goes for MDN Web Docs.

I tried the following code but, no favicon is displayed for any viewport size:

<link rel="icon"
        imagesrcset="./media/dino-200.png 200w, ./media/dino-150.png 150w, ./media/dino-100.png 100w"
        imagesizes="(max-width: 480px) 100px, (max-width: 1024px) 150px, 200px" />

Running the code through https://validator.nu/ produces an error related to the two attributes and the resulting error description seem to suggest that those attributes are not valid(are not defined for the link element).

Error: Attribute imagesrcset not allowed on element link at this point.

From line 9, column 5; to line 12, column 38

itle>↩    <link rel="icon"↩        imagesrcset="./media/dino-200.png 200w, ./media/dino-150.png 150w, ./media/dino-100.png 100w"↩        imagesizes="(max-width: 480px) 100px, (max-width: 1024px) 150px, 200px"↩        href="./media/dino-200.png" />↩</hea

Attributes for element link:
    Global attributes
    href — Address of the hyperlink
    crossorigin — How the element handles crossorigin requests
    rel — Relationship between the document containing the hyperlink and the destination resource
    media — Applicable media
    integrity — Integrity metadata used in Subresource Integrity checks [SRI]
    hreflang — Language of the linked resource
    type — Hint for the type of the referenced resource
    referrerpolicy — Referrer policy for fetches initiated by the element
    sizes — Sizes of the icons (for rel="icon")
    as — Potential destination for a preload request (for rel="preload" and rel="modulepreload")
    color — Color to use when customizing a site's icon (for rel="mask-icon")
    Also, the title attribute has special semantics on this element: Title of the link; CSS style sheet set name.
@domenic
Copy link
Member

domenic commented Jun 4, 2020

Thanks for highlighting this. These are intended for use with rel="preload". I think the spec should be clear about that, the same way it is for as, sizes, and color.

Concretely, this would mean:

  • Modifying the attribute index (which gets reflected into the "Content attributes:" section in the green box to have "(for rel="preload")" after both of those attributes

  • Adding a conformance requirement after the definition of imagesizes and imagesrcset, something like "The imagesrc and imagesizes attributes must not be specified on link elements that do not have a rel attribute that specifies the preload keyword."

@schalkneethling
Copy link
Contributor Author

@domenic Thank you for the feedback. That sounds pretty neat. So, does that mean something like this would be valid:

<link rel="preload"
        imagesrcset="./media/dino-200.png 200w, ./media/dino-150.png 150w, ./media/dino-100.png 100w"
        imagesizes="(max-width: 480px) 100px, (max-width: 1024px) 150px, 200px" as="image" />

Also, am I correct is saying that there is no browser support for this yet?

@domenic
Copy link
Member

domenic commented Jun 4, 2020

So, does that mean something like this would be valid:

Yep, I think that's the idea.

Also, am I correct is saying that there is no browser support for this yet?

This has been supported in Chrome for about 15 months.

@schalkneethling
Copy link
Contributor Author

This has been supported in Chrome for about 15 months.

I will give that a try 👍

domenic added a commit that referenced this issue Jun 4, 2020
Closes #5604.

This also fixes nearby double-negatives for other link attributes.
@domenic domenic self-assigned this Jun 4, 2020
domenic added a commit that referenced this issue Jul 8, 2020
Closes #5604.

This also fixes nearby double-negatives for other link attributes.
mfreed7 pushed a commit to mfreed7/html that referenced this issue Sep 11, 2020
Closes whatwg#5604.

This also fixes nearby double-negatives for other link attributes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging a pull request may close this issue.

2 participants