Why do all browsers download all CSS files — even for media types that they don’t support?

Question

If I provide a CSS link with an unsupported media type ( "bork" ), it will still be loaded by all the browsers I tried (including the desktop and several mobile browsers).

 <link href="bork.css" media="bork" rel="stylesheet" type="text/css" /> 

And worse ...

If the bork.css @import file is also loaded with another CSS file (also with an unsupported media type) that loads the second CSS file.

 /* Inside "bork.css" */ @import url("bork2.css") bork, bork; 

Why!?

My first assumption was that some browsers might look for @import or @media nested blocks with supported media types, and then apply the styling rules contained in these files ...

 /* Inside "bork2.css" */ @import url("all.css"); @media all { /* rules */ } 

... but as far as I can tell, no browser does this. (Fortunately, as that would be a mistake.)

So, all this loading seems completely redundant - unless there are any explanations that I have missed all the time.

EDIT: I'm trying to figure out what motivates browser developers:
"Hey, we're trying to make our browser crazy fast! Download a bunch of CSS files that we're not going to use, and stop loading other resources in the meantime!"

Answer 1

I think the answer is:

The browser is allowed and encouraged to parse media descriptors - no matter which descriptor - as a way to make them future friends

Future versions of HTML may have new values ​​and may allow parameterization of values.

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

Thus, the environment may one day include 3d-glasses or other descriptors, including bork ; -)

EDIT:

The latest CSS3 media query specification speaks of this, which to some extent supports the above:

Unknown carrier types are evaluated as false. Effectively, they are handled the same way with known media types that do not match the media type.

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

Thus, they are considered known and downloadable for use, just not at this time / for this device.

Answer 2

The idea that the real reason they download all media queries is because many CHANGE devices have their responses to those queries after they boot.

The iPhone5 image that is in the portrait when the page loads (the message is “width” like 640px, but not “portrait”, unfortunately, iSeries does not support these requests) ... then you decide to turn the iPhone sideways, and the browser now activates pseudo-landscape mode (again, it fires from width @ 1126, not "landscape").

Most likely, responsive web design was designed to feed various stylesheets into a browser displayed at 640 (rather narrow, probably a phone / tablet) than a browser displayed at 1126 (more likely on a laptop).

If he had not bothered to download additional media request sheets, he would suddenly have to stop, remove the HTTP request, wait for the sheet to load, and then analyze it for display. This can lead to a rather ugly delay.

Since most browsers follow a code reuse pattern, and, for example, Webkit or Gecko core boxes may not know if they are on a laptop or tablet (as if these lines do not start to blur in any case), it simply loads each multimedia request regardless whether he chooses to display it.

While this saves every browser from the bad, it generally breaks up a good piece of the utility for media queries.

A cell phone or a cheap Android tablet should not download additional files (especially in limited data plans) that it simply does not need.

My projects currently use media queries, but I use them sparingly. Most of the requests to my sites are implemented by downloading the necessary files to remove this waste. The remaining requests are used in cases when javascript is disabled or for sheets that need to be loaded “just in case” (for example, my 640px layout usually loads, since most devices can display it in a particular situation).

If anyone has a better, cleaner way of handling this, please let me know.

In the meantime, if you can just come up with functionality that can get around this (maybe android-style manifests built into browsers?), You might need to drop the line into Mozilla or Chromium commands ... it seems like they could use their hand on this one.

Answer 3

After thinking more about this, I formed the theory that there may be a general “rule” in the workplace - that any stylesheet, image or script will be loaded, without any questions, regardless of the specified type of mime or media attribute.

However, after a quick test, the results are a bit mixed ...

• <script src="bork.js" type="bork/bork"></script>
• <script src="bork2.js" type="text/bork"></script>

Chrome 12 downloads neither .
IE8 loads # 2 .
Firefox 4 downloads both .
Opera 11 downloads both .
Safari 5 Win downlads both .

Parsing or working is not performed in any of the browsers. Javascript alert(); inside any file does not start. And this is slightly different from the case of loading CSS, because browsers parse the bork -media CSS code bork @include directives and download these resources recursively.

Answer 4

Sometimes it is necessary to consider a prosaic response. It’s possible that all stylesheets are loaded by browsers simply because the authors of each browser really really consider the case when a single (main) style sheet is used for speed optimization, and the practice of many sites with one style sheet encourages this behavior. If no one is testing it, this is almost certainly not the case when it is being optimized, because people prefer to work on results that are visible (or at least measurable). Perhaps your question will prompt someone to change the test mode ...

In addition, I would risk that the vast majority of site style sheets are static documents and therefore can be very cached (and CDN delivered too, if the site owners prefer to pay).

Answer 5

The only logical reason I can think of is that when you dynamically change (javascript) the erroneous attribute value of the <link> element for the recognized one, the file should be available immediately.
In fact, in some cases this can be considered as a function if you want to download a file, but set aside its device for later.

Answer 6

So, if you really do not want to load the CSS file until something happens, you can try to check when the page loads, if certain conditions are met, and if so, then you can do a “lazy load” and save the comment code (an element of type 8, which in this case will be a tag tag ) inside the newly created child tag of the style tag, and this will cause the browser to check the newly created content and load the CSS file for the style to work.

Any question that you may encounter is trying to solve it, do not hesitate to ask for any clarifications, maybe I can help you in solving your problem. It works for almost everyone (images, js, css, etc.) that you do not want to load or process until something happens or some restrictions do not correspond.

I already tested it and IT WORKS : D, so you can use this code to run, hoping that it will help

 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>TEST CODE</title> <script type="text/javascript"> function test(){ var elems = document.body.childNodes; alert(elems); for (var i = 0, il = elems.length; i < il; i++) { var el = elems[i]; alert(el.nodeType); if (el.nodeType == 8) { var style = document.createElement('style'); style.innerHTML = el.nodeValue; document.getElementById("css").appendChild(style); break; } } } </script > <style id="css"> </style> </head> <body onload="test()"> <!--@import url(red.css) (min-width:400px) and (max-width:599px);--> </body> </html> 

Answer 7

The response may be triggered by media queries. Consider them, for example:

 <link rel="stylesheet" media="(min-width: 300px)" href="example1.css" /> <link rel="stylesheet" media="(min-width: 1000px)" href="example2.css" /> 

If you are using a browser with a window size of 600 pixels, the example1.css stylesheet is used. If the window is resized to 1200 pixels, then the styles2.css example can be applied immediately without waiting for it to load.

It is worth noting that, although the mapping table for inappropriate media queries is still loading, it does not block rendering during loading (usually all CSS files should be loaded before rendering starts).