I'm looking for an authoritative reference with regard to whether <link rel="stylesheet"> with a non-matching media attribute value downloads synchronously or render-blocking or neither.
MDN helpfully draws attention to Scott Jehl's experiments from several years ago:
A style sheet with a media query attached to its tag will still download even if the query returns false.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Additional Reference: http://scottjehl.github.io/CSS-Download-Tests/
So far, so good.
But is that download-which-is-happening-anyway:
- synchronous or asynchronous ?
- render-blocking or non-render-blocking ?
I'm going to guess that it's asynchronous, non-render-blocking and low priority.
But I'd really like to confirm this via an authoritative source - and I've been unable to find one.
Background to this question:
Now that Firefox (as of Jan 2021) supports <link rel="preload"> (see: https://caniuse.com/link-rel-preload), I've been running some experiments to see whether I am happiest with the behaviour of:
<link rel="preload" href="/my-non-critical-styles.css" as="style" onload="this.onload=null; this.rel='stylesheet';" />
versus:
<link rel="stylesheet" href="/my-non-critical-styles.css" media="print" onload="this.media='all';">
I can see that they do behave differently - a speed/performance tool like GTMetrix shows very clearly that the rel="preload" approach prioritises loading the non-critical stylesheet over images, while the media="print" approach prioritises loading images over the non-critical stylesheet - but I also want to be certain that the two approaches are alike in all other respects.
