css - rel=preload for stylesheet isn't applying the styles once downloaded

Question

I'm trying out rel=preload for the first time, using it for a couple of stylesheets. Here is the code in question:

<link rel="preload" href="css/styles.css" as="style">
<link rel="preload" href="//allyoucan.cloud/cdn/icofont/1.0.0beta/css/icofont.css" crossorigin="anonymous" as="style">

I'm testing in Chrome 61, and I can see that the stylesheets are downloaded as expected, however they're never actually applied, and I get the message on the console saying that a preloaded resource isn't being used.

If I remove the rel=preload in favour of just rel=stylesheet, then it works perfectly fine.

Is there something I'm missing?

question from:https://stackoverflow.com/questions/46787921/rel-preload-for-stylesheet-isnt-applying-the-styles-once-downloaded

Answer 1

What do you think about this approach:

<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">

Resource: https://www.filamentgroup.com/lab/async-css.html