5

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.

3
  • 1
    I've found something here: filamentgroup.com/lab/async-css.html. Scott Jehl (again) states: "Browsers will consider stylesheets for inapplicable media to be low-priority, and download them without blocking page rendering." If I can't find anything better, I guess that's the confirmation I'm looking for, but it would be nice to see something from W3C, WHAT-WG, WICG, MDN etc.
    – Rounin
    Mar 12 at 15:55
  • 1
    See also (albeit, from a different third-party website): "When the “print” value is selected for the media attribute, the browser loads the relevant CSS file asynchronously." in holisticseo.digital/pagespeed/async-css
    – Rounin
    Mar 12 at 17:01
  • Scott Jehl (again): "[...] by declaring a media type that doesn’t match the current environment, we can achieve an interesting and useful effect: the browser will load the stylesheet without delaying page rendering, asynchronously [...]" in filamentgroup.com/lab/load-css-simpler
    – Rounin
    Mar 12 at 17:01

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.