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

If you append a <style> to the head, the results apply synchronously:

http://jsbin.com/jinehugide/1/edit?html,css,js,output

However here's an example of a confusing behavior where I use a data uri on
a link tag.

http://jsbin.com/bumiperabi/1/edit?html,css,js,output

in Safari, if I quit the browser the first time I load the page the text of
the element is rbg(255,0,0) [red]. If I reload the page the content is
rbg(0,0,255). This suggests that the parsing of the css is async but
there's a synchronous cache that can be used.

-b

On Sat, Jan 13, 2018 at 10:23 AM, Ilya Grigorik <igrigorik@google.com>
wrote:

>
>
> On Fri, Jan 12, 2018 at 11:43 PM, Anne van Kesteren <annevk@annevk.nl>
> wrote:
>
>> On Sat, Jan 13, 2018 at 7:39 AM, Ilya Grigorik <igrigorik@google.com>
>> wrote:
>> > On Fri, Jan 12, 2018 at 10:24 PM, Ben Maurer <ben.maurer@gmail.com>
>> wrote:
>> >>>> We use the fact that a resource has been downloaded to reveal content
>> >>>> that depends on the JS/CSS that we are fetching. So if rel=preload
>> told use
>> >>>> a.css is available we'll insert HTML that uses a.css into the DOM.
>> Even a
>> >>>> single frame of the browser doing something like parsing the file
>> would
>> >>>> create a disruptive user experience.
>> >>>
>> >>> Right, I see. I think that's a great use case to raise against HTML
>> spec
>> >>> and see what the guidance is there — this is not preload specific,
>> same
>> >>> applies for resources coming from HTTP cache, serviceworker, etc.
>> >>
>> >> Is the correct formulation of the question "does the presence of a
>> >> resource in the fetch group's response cache [which is what the
>> preload spec
>> >> says it adds the stylesheet to] guarantee that inserting a <link> with
>> an
>> >> href to that resource will synchronously apply to the DOM"
>> >
>> > I'll defer to Anne on this one. :-)
>>
>> Well, you shouldn't, since this is the complaint I've been making to
>> you for a number of years now about the state of these features. You
>> haven't defined them end-to-end, so the answer to these questions
>> remains unclear.
>
>
> Anne, what's missing for preload specifically? Happy to address it if we
> can.
>
> My observation here is that you can remove preload out of this question
> and rephrase it as: "If I programmatically inject a <link rel=stylesheet>
> what execution guarantees, if any, are provided?"
>
>
>> Having said that, I don't think we'd want to give
>> synchronous guarantees, and especially not that the resource is
>> already parsed as CSS and has the relevant data structures created.
>>
>
> Is that true in practice today? Ben, have you checked if there are any WPT
> tests for these behaviors?
>
> ig
>
>
>>
>> --
>> https://annevankesteren.nl/
>>
>
>