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';" />


<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.



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.