Link stylesheet preload vs W3C validation

Asked 26/12, 2016 at 12:45 Answered 12/12, 2019 at 5:38

Solved css w3c-validation preload google-pagespeed

I'm trying to satisfy 2 checkers: W3C validator and google page insight

Google Page Insight suggested to me to load asynchronously all blocking CSS files. Well, I've rewritten the stylesheet file inclusion in preload way, as follow, and deferred from head to the end of the body:

 ...
    <link rel="preload" href="mystyles.css" media="all" as="style" 
                     onload="this.rel='stylesheet'"/>
</body>

Google Page Insight forced me to get it out from the head and put it at the end of the body.

Ok, I'm OK against Google Page Insight.

But W3C Validator says me now:

Error: A link element must not appear as a descendant of a body element unless the link element has an itemprop attribute or has a rel attribute whose value contains dns-prefetch, pingback, preconnect, prefetch, prerender, or stylesheet

Why "preload" is not admitted in rel attribute out of the head? I've tried to assign an itemprop, but it's not possible to have an itemprop and a rel in the same link.

Freud answered 26/12, 2016 at 12:45 Comment(1)

Link preload is a draft and is a working in progress. W3 validator is based on the current standards. – Chadbourne 26/12, 2016 at 15:51

Maintainer of the W3C HTML checker (validator) here. A checker bug was caused this. When I added rel=preloadsupport to the checker, I forgot to add it to the list of the rel values the checker code compares against to decide if a particular link element is allowed in the body.

I’ve now fixed it in the checker sources and pushed the fix to https://validator.w3.org/nu/.

So, the checker will no longer report an error for the code above. Thanks for catching this.

Clue answered 26/12, 2016 at 23:25 Comment(0)

I use an example

<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p></p>
</body>
</html>

and https://validator.w3.org/nu/#textarea return success.

look in https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

Kelcey answered 12/12, 2019 at 5:38 Comment(1)

how you can read in accepted answer, W3C maintainer fixed the validator a long ago. – Freud 12/12, 2019 at 9:16

Recommended topics

Hot tags