Why do all browsers download all CSS files - even for media types they don't support?

Question

If I specify a CSS link with an unsupported media type (\"bork\") it still gets downloaded by every browser I\'ve tried (including both desktop and several mobi

Answer 1

Thinking that the real reason that they load all media queries is because many devices CHANGE their responses to these queries after load.

Imaging an iPhone5 that is in portrait on page load (reporting 'width' as 640px, but not 'portrait, unfortunately the iSeries do not support those queries)... you then decide to turn the iPhone sideways, and the browser now activates the pseudo landscape mode (again, triggered from width @ 1126 rather than 'landscape').

Most likely, a responsive web design has been designed to feed different stylesheets to a browser displaying at 640 (rather narrow, probably a phone/tablet) than it does to a browser displaying at 1126 (more likely a laptop).

If it hadn't bothered to load the additional media query sheets, then it would suddenly have to stop, shoot an http request out, wait for the sheet to load, and then parse it to display. This could result in a rather ugly delay.

As most browsers follow a pattern of code reuse, and the core chunks of Webkit or Gecko, for example, may not be aware whether they are on a laptop or a tablet (as if those lines aren't beginning to blur anyway), it simply loads each media query regardless of whether or not they choose to display it.

While this saves each browser from looking bad, overall it breaks a good chunk of the utility behind media queries.

A cell phone or a cheap android tablet shouldn't have to download the additional files (especially on limited data plans) that it will simply never need.

At the moment, my designs DO use media queries, but I use them sparingly. Much of the media queryishness on my sites is implemented through javascript loading of required files to eliminate this waste. The remaining queries are used in cases of javascript being shut off, or for sheets that need to be loaded 'just in case' (my 640px layout, for example, is usually always loaded, as most devices might display it in one situation or another).

If anyone out there has a better, cleaner, method of handling this, please let me know.

In the meantime, if you can think of a simply to implement functionality that might circumvent this (maybe android-style manifests built into browsers?), you might want to drop a line to the Mozilla or Chromium teams... seem like they could use a hand on this one.