Are LINKed Stylesheets Out Of The Specified Media Even Loaded?

I want the stylesheets out of the defined device width defined in a LINK tag not to be even loaded if it doesn't apply. I could import it from the main stylesheet (for handheld dev

Solution 1:

Scott Jehl has a polyfill that attempts to override the browser default to load every linked stylesheet.

https://github.com/scottjehl/eCSSential

Solution 2:

A browser can't assume that it will never match a media query, so it has to load the stylesheet in case it ever does match the media query and has to use the stylesheet as a result. This eliminates any network latency associated with lazy-loading that would cause a problem similar to FOUC, where the content doesn't look right for a fraction of a second (or, if the connection gets really spotty, several seconds) as the browser waits for the stylesheet to be loaded before it can be used.

Note that the same applies with @import statements. The spec however does not require a browser to either load a stylesheet conditionally, or always load it. This is implementation-dependent. As far as I have seen though, all browsers will load a stylesheet anyway regardless of media queries.

You cannot have an @import statement anywhere other than the beginning of a stylesheet before any rulesets anyway.