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

[Boris Zbarsky]

On 12/8/11 2:39 PM, Ashley Sheridan wrote:
> 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.

There are several separate problems here.  Below I focus on the Gecko 
perspective, which is what I'm familiar with.

First of all, the code was written originally before mobile started 
being a concern.  And in the desktop space, there are very few media 
queries which are guaranteed to never match.  For example, the size of 
the CSS viewport is not fixed on desktop.  Furthermore, until the recent 
media query implementation all that you could filter on was the actual 
medium, and in the common cases you wanted to download both the print 
and screen sheets and other media were unused.  So there wasn't much 
need to optimize away stylesheets whose media queries did not match.

Second, there is a slight problem of spec collision.  While sheets whose 
media queries do not match should not affect rendering, there are no 
provisions for not exposing their object model, which of course requires 
downloading the stylesheet.  I agree it might be good to add such 
provisions, because there are some media queries we really _do_ know 
statically will never match in Gecko.  They're just a much smaller set 
than most people think.  And of course there may be page compat concerns.

> These days, when it's recommended to use sprites to reduce bandwidth on multiple images

The main benefit of using sprites is to reduce latency, not bandwidth, 
no?  This is a general theme for mobile networks, actually: the 
bandwidth is not that bad, but the latency is a killer.

> it seems crazy that there's no contingency to reduce bandwidth on CSS
> files that the browser should know it doesn't need.

Except it doesn't know that, is the problem.

> 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.

Screen widths in media queries are in CSS pixels, not in device pixels.

There are operating system settings, that can even be changed 
dynamically, that change the screen width in CSS pixels.  There are even 
browser settings that change the screen width in CSS pixels.  Try this 
in Firefox:

   <input type="button" onclick="alert(window.screen.width)"
          value="click me">

Load that page, click the button, zoom in as much as you can using the 
browser's zoom function, and click the button again.  Over here, the two 
alerts show 1920 and 640 respectively.

>  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

People resize their browser all the time, in CSS pixels.  At least in 
Gecko.  See above about zooming.  And I, as a user, would hate that sort 
of lag (I often toggle to and from full-screen mode, which also resizes 
my browser)....

> 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.

Which means that on the mobile devices it's more likely that all the 
sheets will need to be downloaded, right?

I agree that it feels like we can have a better solution here, but I'm 
not sure what that solution is yet.

-Boris