TechQA.

Link stylesheet preload vs W3C validation

3k views Asked by At

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.

css w3c-validation preload google-pagespeed
Original Q&A
2

There are 2 answers

0
sideshowbarker On BEST ANSWER

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.

1
F00x On

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

Related Questions in CSS

Related Questions in W3C-VALIDATION

Related Questions in PRELOAD

Related Questions in GOOGLE-PAGESPEED

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions