Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

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 @imports 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 @imports 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!"

like image 562
Már Örlygsson Avatar asked Jun 10 '11 19:06

Már Örlygsson


1 Answers

I think the answer is this:

Browsers are allowed and encouraged to parse media descriptors - no matter what the descriptor - as a way to make them future friendly

Future versions of HTML may introduce new values and may allow parameterized values.

*From: http://www.w3.org/TR/html4/types.html#h-6.13

In this way, media may one day include 3d-glasses or other descriptors, including bork ;-)

EDIT:

The latest CSS3 spec on media queries says this, which supports the above, to a certain degree:

Unknown media types evaluate to false. Effectively, they are treated identically to known media types that do not match the media type of the device.

*From: http://dev.w3.org/csswg/css3-mediaqueries/#error-handling

So they are treated as known and downloaded to be used, just not at that time/for that device.

like image 128
Jason Gennaro Avatar answered Nov 09 '22 19:11

Jason Gennaro