Re: Media Queries and optimizing what data gets transferred

On 25 January 2013 17:50, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

> On Fri, Jan 25, 2013 at 4:20 AM, Henri Sivonen <hsivonen@iki.fi> wrote:
> > Thus I propose that Media Queries gain a way to be flagged as
> > evaluated only at page load time such that the browser promises to the
> > Web author that it won't eagerly download data that's not applicable
> > in the state the browser is in during the page load.
>
> I've heard several suggestions that we allow a stylesheet to be marked
> as "non-essential", so it doesn't block script loads or the document's
> load event.  Usually the suggestion is in the form of adding an
> "async" or "defer" attribute to <link> (I never learned which did what
> in <script>, so choose whichever seems closer to the desired intent).
>
> Perhaps we could hook your desired functionality into this as well?
> Async stylesheets don't load at all *until* their media query
> evaluates to true, and they never block other loads.  The default MQ
> is just "all", so "async" by itself will just shift the stylesheet
> down in load order, but if you apply a non-trivial MQ, it'll avoid
> loading entirely until it's ready.
>
>
>
Some UAs e.g. WebKit, already defer the stylesheets that don't meet the
current mediaqueries.

The problem with using JS to emulate this behaviour as eCSSential does is
that CSS files are concealed from the lookahead preloader and so other
resources get scheduled for download before them.

I wrote up a bit about it here:
http://andydavies.me/blog/2012/12/29/think-twice-before-using-matchmedia-to-conditionally-load-stylesheets/

My reading of the spec suggests that the UA could choose to defer the
non-applicable stylesheets forever but there may be performance issues with
that in some circumstances.

Cheers

Andy