CSS Downloads by Media Query

A test by @scottjehl

The point of this page is to test whether today's browsers will download stylesheets that are referenced with media queries that would not apply on that browser or device.

This page contains 10 link elements that reference CSS files meant for testing. Each link has a media attribute containing a unique media query. All but a few of these media queries (and their respective stylesheets) would not likely apply on any devices today; for example, some media queries reference extremely wide screens, some reference impossibly (currently) rich high-density HD displays, and one is just plain nonsense (really: media="nonsense"). In addition to those, there are a few realistic queries as well, such as only all, tv, and handheld

The results of manually testing this page by loading it in several browsers and monitoring HTTP traffic are as follows. The top row is the only one that should apply in every media-query supporting browser.

Media Query iPhone 4.3 Android Tablet Chrome 19 IE 8 IE 9 Opera 11 Opera Mobile
only all Downloaded Downloaded Downloaded Downloaded Downloaded Downloaded Downloaded
(min-width: 4000px) Downloaded Downloaded Downloaded Downloaded Downloaded Downloaded Downloaded
only all and (min-width: 4000px) Downloaded Downloaded Downloaded Downloaded Downloaded Downloaded Downloaded
(min-device-width: 4000px) Downloaded Downloaded Downloaded Downloaded Downloaded Downloaded Downloaded
(min-device-pixel-ratio: 6) Downloaded Downloaded Downloaded Downloaded Downloaded Downloaded Downloaded
only all and (min-device-pixel-ratio: 6) Downloaded Downloaded Downloaded Downloaded Downloaded Downloaded Downloaded
tv Downloaded Downloaded Downloaded Downloaded Downloaded Downloaded Downloaded
handheld Downloaded Downloaded Downloaded Downloaded Downloaded Downloaded Downloaded
nonsense Downloaded Downloaded Downloaded Downloaded Downloaded Downloaded Downloaded