Link 样式表预加载与 W3C 验证

Question

我正在尝试满足 2 个跳棋者的要求：W3C validator and 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 逼着我把它从头部拿出来放在正文的末尾。

好的，我同意 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

为什么"preload"在rel属性中不承认出头？我试过分配一个 itemprop，但是不可能在同一个 link.

中有一个 itemprop 和一个 rel

Answer 1

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

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

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

Answer 2

我举个例子

<!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>

和https://validator.w3.org/nu/#textareareturn成功。

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

Link 样式表预加载与 W3C 验证

Link stylesheet preload vs W3C validation

css

w3c-validation

preload

google-pagespeed