Deka87 Deka87 - 9 days ago 6
HTML Question

Is it valid to put stylesheets before the closing body tag if using critical CSS in the head?

I have to follow a Google advise to first load critical CSS inline in the header then load other styles. Some articles advice to load other styles asynchronously with the help of JS, however I wonder if I can simply place them before the closing

body
tag? Is it going to affect rendering negatively (taken that the above the fold styles are already loaded)?

<html>
<head>
<style>
<!-- Critical CSS goes here to display what's above the fold -->
</style>
</head>
<body>
...
<link rel="stylesheet" ... >
</body>
</html>

Answer

In HTML5.0 the <link> element is only allowed in the <head>:

If the rel attribute is used, the element is restricted to the head element.

(Note also the previous line: "A link element must have a rel attribute".)

But the HTML5.2 working draft relaxes this requirement:

Keywords that are body-ok affect whether link elements are allowed in the body. The body-ok keywords defined by this specification are prefetch, and stylesheet.