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

I agree and definitely had the same feeling when I first saw these tricks
being promoted. To me it would make much more sense to have <style async>
and <style defer> (defer for cases where source order matters).

Does anyone on this list have context for if/whether there were issues with
async stylesheets that prevented them from going forward?

On Tue, Jan 2, 2018 at 9:40 AM, Royi Hagigi <royi@fb.com> wrote:

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