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

[Ashley Sheridan]

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.

-- 
Thanks,
Ash
http://www.ashleysheridan.co.uk