Does a ` with a non-matching media value download sync or async, render-blocking or non-render-blocking?

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.