[whatwg] Use of media queries to limit bandwidth/data transfer
bzbarsky at MIT.EDU
Thu Dec 8 13:30:44 PST 2011
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
<input type="button" onclick="alert(window.screen.width)"
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
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
> 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.
More information about the whatwg