[whatwg] Proposal for change in recommendation for loading behavior of non-applicable stylesheets

Sun Jun 10 11:24:43 PDT 2012

On 6/10/12 12:51 PM, Scott Jehl wrote:
> I'd like to propose that the spec recommends that vendors defer the
> loading of Stylesheets referenced via inapplicable media so that they
> do not block page rendering.

One issue with this is that in many cases the UA may not yet know what
media queries apply to the document when starting the sheet loads.  In
some cases it does, of course, but those may be rarer than you think...

> For example, if a stylesheet is referenced using a
> (min-width: 1000px) media query, a small-screen device could decide
> that this stylesheet should not be fetched at all because it could
> never apply on its screen dimensions.

Actually, it could, because the media query applies to viewport 
dimensions (in CSS pixels), not screen dimensions.  A trivial example 
would be this document:

   <!DOCTYPE html>
   <iframe style="width: 2000px"
           src="document-using-sheet-with-min-width-1000px"></iframe>

There are also various user actions that can similarly change the width 
of even the toplevel window in CSS pixels such that it's larger than the 
nominal device width in CSS px (e.g. zooming out, in UAs that change the 
size of CSS px when you zoom).

> It merely re-evaluates if an inapplicable
> query would apply if it were a "device" query instead of a viewport
> query, and if not, the stylesheet is not loaded at all.

Except device queries and viewport queries are not at all the same 
thing, of course.  Conflating the two may be ok for a library that 
developers are free to not use if it's making assumptions that are not 
true in their use cases, but it's really not OK for a UA to do.

I agree that better UA behavior here would be nice, but it's not trivial 
to do without breaking sites or creating a poor user experience.

> 2. Reducing the amount of time that an unresponsive stylesheet can
> block page rendering

Yes, indeed.

-Boris