Should it block the rendering of the <div> until the stylesheet is fetched?

document.body.innerHTML = `
  <link blocking="render" rel="stylesheet" href="style.css" />
  <div>foo</div>
`

Should it block the rendering of the <div> until the stylesheet is fetched?

document.body.innerHTML = `
  <link blocking="render" rel="stylesheet" href="style.css" />
  <div>foo</div>
`

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#blocking

• html

2 Answers 2

No, the tag does not support a blocking="render" attribute. However, by default, a is render-blocking unless specified otherwise (e.g., using media="print" or rel="preload").

In your case, the foo will not render until style.css is fetched and applied because the browser blocks rendering on stylesheets to prevent Flash of Unstyled Content (FOUC).

If you want to make the stylesheet non-blocking, you can use:

<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">

This loads the stylesheet asynchronously and applies it after the page has rendered.

I seem that you want to show some content when the CSS is laoaded (maybe you see a delay and the initial html without style). If so, you can try to use the body attribute onLoad . It trigger once the HTML (css files too) are loaded. Set a class to hide some contente like:

<div class="hidden">....</div>

The remove the class using javascript inside onLoad