If I link to a stylesheet using <link href="my.css"
rel="stylesheet">
, is it guaranteed that the browser will use this CSS
before the initial render of my document?
Yes. Stylesheets in (both <style>
and
<link>
) are render blocking.
De facto it is “common knowledge”, and we can also observe it using, e.g. the performance pane of Chrome Dev Tools.
De jure needed a dig. From the proposal to introduce the
blocking="render"
attribute on <link>
:
“All current browsers already have a render-blocking mechanism: after navigation, the user agent will not render any pixel to the screen before all stylesheets and synchronous scripts in
<head>
are loaded and evaluated (or a UA-defined timeout is reached)”
Does this cover stylesheets added via <link
rel="stylesheet">
? We need to head over to the WHATWG HTML standard:
“The
stylesheet
keyword may be used withlink
elements … Alink
element of this type is implicitly potentially render-blocking if the element was created by its node document's parser”
The “potentially” in there is, I assume, hinting at the "UA-defined timeout" and other wiggliness.
What this means is that:
To avoid the second problem while having the first cake, bundlers bundle all the
CSS into style
tag(s).