Link stylesheet preload vs W3C validation

Question

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.

Answer 1

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.