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 QueryiPhone 4.3Android TabletChrome 19IE 8IE 9Opera 11Opera Mobile
only allDownloadedDownloadedDownloadedDownloadedDownloadedDownloadedDownloaded
(min-width: 4000px)DownloadedDownloadedDownloadedDownloadedDownloadedDownloadedDownloaded
only all and (min-width: 4000px)DownloadedDownloadedDownloadedDownloadedDownloadedDownloadedDownloaded
(min-device-width: 4000px)DownloadedDownloadedDownloadedDownloadedDownloadedDownloadedDownloaded
(min-device-pixel-ratio: 6)DownloadedDownloadedDownloadedDownloadedDownloadedDownloadedDownloaded
only all and (min-device-pixel-ratio: 6)DownloadedDownloadedDownloadedDownloadedDownloadedDownloadedDownloaded
tvDownloadedDownloadedDownloadedDownloadedDownloadedDownloadedDownloaded
handheldDownloadedDownloadedDownloadedDownloadedDownloadedDownloadedDownloaded
nonsenseDownloadedDownloadedDownloadedDownloadedDownloadedDownloadedDownloaded