Re: Media Queries and optimizing what data gets transferred

On Wed, Jan 30, 2013 at 5:59 AM, Yoav Weiss <yoav@yoav.ws> wrote:
> This sounds like a great proposal that will enable browsers to avoid
> downloading excessive CSS.
> What bothers me about it is that if I understand correctly, `async` CSS
> which `media` matches the current viewport/dpi/etc risks resulting in FOUC.
> What does the `async` attribute mean as far as authors are concerned? "No JS
> inspects this CSS"? "No need to download before first paint"? Both?
> Something else?

Both.  If you use async on a stylesheet, there is *no* guarantee that
it will be downloaded by the time the page is first painted, and in
fact it's likely to not be.  And in my proposal, it's not accessible
via JS until you explicitly request it to be so.  In general, you
can't assume it will *ever* be downloaded until you request it in JS.

> IMO, RWD authors often need to define a set of "essential" CSS files, from
> which only one of them applied to the current responsive breakpoint, and the
> others are (at least currently) irrelevant. In this case, only the relevant
> one should be downloaded with high priority and possibly block the first
> paint to avoid FOUC (as CSS is loaded today), while the irrelevant ones can
> download later/never. I'm not sure this proposal answers that need.

It does.  All the async ones are "low" priority according to your
categorization, and then you can just run through and request the
"essential" ones via JS on page load.  It'll still request them
"slowly", so as to not interfere with the rest of the page, but
they'll be guaranteed to load in a reasonable amount of time, while
the rest might not ever.

In other words, normal stylesheets are "high" priority.  Async
stylesheets are "low".  Async stylesheets that have been explicitly
requested through the JS API are "medium".

~TJ

Received on Wednesday, 30 January 2013 18:17:11 UTC