css - 链接样式表预加载与 W3C 验证

Question

我正在尝试满足 2 个跳棋:W3C validator和 google page insight

Google Page Insight 建议我异步加载所有阻塞的 CSS 文件。好吧，我已经以预加载的方式重写了样式表文件包含，如下所示，并从头部延迟到主体的末尾:

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

Google Page Insight 迫使我将它从头部取出并放在 body 的末端。

好吧，我同意 Google Page Insight。

但是 W3C Validator 现在告诉我:

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

为什么头部的rel属性不承认“preload”？我尝试分配一个 itemprop，但不可能在同一个链接中同时拥有一个 itemprop 和一个 rel。

Answer 1

这里是 W3C HTML 检查器(验证器)的维护者。这是一个检查器错误引起的。当I added rel=preloadsupport to the checker ，我忘记将它添加到 rel 值的列表中，检查器代码将与之进行比较以确定正文中是否允许特定的 link 元素。

I’ve now fixed it in the checker sources并将修复推送到 https://validator.w3.org/nu/ .

因此，检查器将不再报告上述代码的错误。感谢您捕获这个。