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 mobile browsers).
<link href="bork.css" media="bork" rel="stylesheet" type="text/css" />
And it gets worse...
If the file bork.css @import
s an other CSS file (also with an unsupported media type) that second CSS file also gets downloaded.
/* Inside "bork.css" */
@import url("bork2.css") bork, bork;
Why!?
My first assumption was that some browsers might be searching for nested @import
s or @media
blocks with media types that they supported - and then apply the styling rules contained within those files...
/* Inside "bork2.css" */
@import url("all.css");
@media all {
/* rules */
}
...but as far s I can tell, not a single browser does that. (Fortunately, as that would be a bug.)
So all this downloading seems wholly redundant - unless there's some explanation that I've missed all along.
EDIT: What I'm trying to understand is that motivates browser makers to go:
"Hey! We're trying to make our browser crazy fast! Let's download a bunch of CSS files that we have no intention of applying, and halt the loading of other resources meanwhile!"
media
attribute until they've performed an unnecessary HTTP request. Yes, but why do they do that?