[whatwg] Use of media queries to limit bandwidth/data transfer

[Tab Atkins Jr.]

On Thu, Dec 8, 2011 at 11:39 AM, Ashley Sheridan
<ash at ashleysheridan.co.uk> wrote:
> I couldn't find anything about this specifically, and I'm not sure if
> this is the best place to ask this, but here we go.
>
> I've been trying to optimise my site (as a test case) for mobile usage
> and one area where I found issues was with the media queries used to
> link CSS files. I noticed that despite each <link> tag including the
> maximum and minimum screen widths (which is about the minimum that is
> supported across every majority browser) the browsers (IE, Opera,
> Firefox, Chrome) all seemed to download every CSS file. These days, when
> it's recommended to use sprites to reduce bandwidth on multiple images,
> it seems crazy that there's no contingency to reduce bandwidth on CSS
> files that the browser should know it doesn't need. Is there a
> particular reason for this? I can understand for devices like a tablet
> where the orientation is expected to change often and it might want to
> download multiple CSS files to reduce the latency that downloading as
> required would bring, but that doesn't explain why a desktop browser
> would still need to grab CSS that is clearly labelled as being for a
> maximum screen width of 300px.
>
> From a usage point of view, I wouldn't be too unhappy at having my
> browser download extra CSS found in a media queried <link> if I decide
> to resize my browser, as that is not what I'd call typical browsing
> behavior, but I would expect a tablet or mobile to be more responsive as
> they are types of devices that are prone to be moved around and tilted.

The reason for this is so that, if the document width later changes
such that one of the excluded stylesheets is now valid, we don't want
to have a noticeable delay while we fire off a network request and
retrieve the new stylesheet.  Remember that widths refer to the
browser window, not the monitor, so small widths *can* (and do) occur
on desktop browsers.

This delay is potentially bad for usability, but more importantly,
it's bad for scripts, as there's a substantial window in which a
<link>'s media query resolves to true, but it either doesn't have an
associated Stylesheet object, or the Stylesheet is a "dummy" that
doesn't yet contain the real values.  Stylesheet access is
synchronous, so we'd have to block the entire JS thread while waiting
for it to come in.

~TJ