Using preload for "async" CSS by changing `rel` trick

There is a trick floating around to use `<link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.rel='stylesheet'">` to load CSS “async” similar to how async scripts are loaded. (Details at https://github.com/filamentgroup/loadCSS). This definitely works (at least in Chrome) but I have a couple questions…


  1.  What are your thoughts on doing this? I see some discussion years ago about the value of an “async” attribute like on <script> tags but for stylesheets, but not too much discussion recently. It seems like a bit of a hack and feels like the behavior might not be predictable, even if it works right now.


  1.  The spec isn’t clear about what would happen here if you change the “rel” attribute of the link, and I’m not sure what the behavior would be in latest Chrome for example. Should it be guaranteed that the stylesheet is installed in the page in the same frame as the `“onload=”this.rel=’stylesheet’”` is fired?


Example: you have JS that renders a part of your page on the client, but in order to avoid FOUC, needs to wait for this stylesheet that is being loaded this way. If the JS listens to the preload link’s “onload” event and renders to the DOM in the same frame as “rel” is set to stylesheet, will the styles be applied to the page when the new markup is shown or is there a chance the browser will defer applying the stylesheet to later, causing a FOUC?

Thanks, and hopefully I provided enough context here,

Royi Hagigi
royi@fb.com<mailto:royi@fb.com>