Re: Media Queries and optimizing what data gets transferred

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?

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.


On Mon, Jan 28, 2013 at 5:06 PM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

> On Mon, Jan 28, 2013 at 5:40 AM, Henri Sivonen <hsivonen@iki.fi> wrote:
> > On Fri, Jan 25, 2013 at 8:28 PM, Tab Atkins Jr. <jackalmage@gmail.com>
> wrote:
> >> As Boris has explained, it's not performance issues, but rather author
> >> expectations.  The average author expects a CSSOM to exist for all the
> >> stylesheets in the page, and when the set of matched MQs changes, for
> >> the styles to change at the same time, not a network-roundtrip later.
> >
> > Does the average author really expect anything about CSSOM? I would
> > guess that the average author doesn't use CSSOM beyond the sugaring
> > for the style attribute and maybe getComputedStyle() and even those
> > hidden behind a JavaScript library.
> >
> > The use cases for fiddling with the style rules of external sheets in
> > the OM (beyond the immediate style attribute sugaring) don't seem that
> > common.
>
> Enough do that you get compat bugs if you break the assumption,
> apparently.  I suspect Boris can provide more detail if you desire.
>
> > To me, optimizing the availability of inapplicable style sheet data in
> > the OM over what gets transferred seems totally backwards compared to
> > what the mythical average author wants.
>
> Optimizing for the worst rather than the average is distressingly
> necessary in the web. :/
>
> >> If any browser *did* defer them indefinitely by default, they'd get
> >> compat bugs.
> >
> > This I can believe.
> >
> > So could the problem be solved by adding an attribute on <link> that
> > turns off the ability to reach the OM of that stylesheet from scripts
> > (at least unless some async access request API is used first) and then
> > making browsers not load stylesheets until they are applicable (i.e.
> > making e.g. printing wait for additional stylesheets to be fetched)?
>
> I like the idea of making the OM completely inaccessible until you
> explicitly request it, rather than having scripts commonly race
> against the network request and break when they win.
>
> So, proposal as it stands is:
>
> Add an "async" (or "defer", whatever is closest to the semantics we're
> trying to achieve) to <link>.  I guess currently only rel=stylesheet
> pays attention to it, but other rels can opt-in as well on their own.
> (Add it to <style> as well, with the semantics applying to @import'd
> sheets? Maybe confusing, since you wouldnt' want to automatically
> opt-in the @import rules in a <link async> to be async as well.
> Perhaps we can add this to the @import grammar instead.)
>
> An async stylesheet never blocks the parsing or JS thread, or any
> other loads started during page load (or just from the parser?). When
> the network queue is empty, the browser begins requesting async
> stylesheets.  (Replace this with appropriately technical language
> cripped from <script>'s loading algo, if that would help.)
>
> A browser MAY defer indefinitely the loading of an async stylesheet
> whose media query is false.
>
> An async stylesheet does not expose a CSSOM at any time, whether it's
> loaded or not, until the author requests it.  This includes showing up
> in the document.styleSheets list, etc.  The author can request the
> CSSOM be exposed by calling LinkElement#requestCSSOM(callback?) (name
> pending).  If the stylesheet is not yet loaded, it puts a load on the
> event queue.  It then puts an action on the event queue to expose the
> CSSOM, and if the optional callback was provided, call the callback,
> passing it the CSSStyleSheet object thus generated.
>
> If this sounds good, I'll put it on the wiki.  We can discuss it
> internally, then I'll send it to WHATWG for further review and request
> for addition.
>
> ~TJ
>
>