为什么所有的浏览器都下载所有的CSS文件 – 即使是他们不支持的媒体types。
如果我指定一个带有不受支持的媒体types（ "bork" ）的CSS链接，它仍会被我尝试过的每个浏览器（包括桌面和多个移动浏览器）下载。
<link href="bork.css" media="bork" rel="stylesheet" type="text/css" />
而且越来越差
如果文件bork.css @import是另一个CSS文件（也是不支持的媒体types），那么第二个CSS文件也会被下载。
/* Inside "bork.css" */ @import url("bork2.css") bork, bork;
为什么！？
我的第一个假设是，一些浏览器可能正在search嵌套@import s或@media块与他们支持的媒体types – 然后应用这些文件中包含的样式规则…
/* Inside "bork2.css" */ @import url("all.css"); @media all { /* rules */ }
…但是，据我所知，没有一个浏览器能做到这一点。 （幸运的是，这将是一个错误。）
所以这一切下载似乎完全是多余的 – 除非有一些我一直错过的解释。
编辑：我想了解的是，激励浏览器制造商去：
“嘿！我们试图让浏览器变得疯狂！我们下载一堆我们无意申请的CSS文件，同时停止加载其他资源！
我认为答案是这样的：
浏览器被允许和鼓励parsingmedia描述符 – 不pipe描述符是什么 – 作为使他们未来友好的一种方式
未来的HTML版本可能会引入新的值，并可能允许参数化的值。
*来自： http : //www.w3.org/TR/html4/types.html#h-6.13
通过这种方式，媒体可能会有一天包括3d-glasses或其他描述符，包括bork 😉
编辑：
媒体查询的最新CSS3规范说，这在一定程度上支持以上内容：
未知的媒体types评估为false。 实际上，它们被视为与设备的媒体types不匹配的已知媒体types相同。
*来自： http : //dev.w3.org/csswg/css3-mediaqueries/#error-handling
所以他们被视为已知和下载使用，而不是在那个时候/为该设备。
认为他们加载所有媒体查询的真正原因是因为许多设备在加载之后改变了对这些查询的响应。
在页面加载中纵向显示的iPhone5（报告“width”为640px，但不是“portrait”，不幸的是iSeries不支持这些查询）…然后，您决定翻转iPhone，浏览器现在激活伪景观模式（再次，从宽度@ 1126而不是“风景”触发）。
最有可能的是，一个响应式网页devise已经被devise为将不同的样式表提供给显示在640（相当窄，可能是电话/平板）的浏览器，而不是显示在1126（更可能是笔记本电脑）的浏览器。
如果没有加载额外的媒体查询表，那么它会突然停止，发出一个http请求，等待表单加载，然后parsing它显示。 这可能会导致一个相当丑陋的延迟。
由于大多数浏览器遵循代码重用的模式，例如，Webkit或Gecko的核心块可能不知道它们是在笔记本电脑上还是在平板电脑上（就好像这些线路并不开始模糊），它只需加载每个媒体查询，而不pipe他们是否select显示它。
虽然这样可以避免每个浏览器看起来不好，但总的来说，它打破了媒体查询背后的一大块用途。
手机或便宜的平板电脑不应该下载额外的文件（特别是在有限的数据计划），它根本就不需要。
目前，我的devise使用媒体查询，但我谨慎使用它们。 我网站上的大部分媒体质疑都是通过JavaScript加载所需的文件来实现的，以消除这种浪费。 剩余的查询用于javascript被closures的情况下，或者用于需要加载的表单（以防万一）（例如，我的640px布局通常总是被加载，因为大多数设备可能在某种情况下显示它）。
如果有人有一个更好，更清洁的方法处理这个，请让我知道。
同时，如果你能想到一个简单的实现可能绕过这个function的可能性（也许可以在浏览器中内置android风格的清单？），你可能想要把一行代码放到Mozilla或者Chromium团队中……看起来他们可以用这只手。
在思考了这个之后，我形成了一个理论，即在工作中可能会有一个通用的“规则” – 无论指定的MIMEtypes或媒体属性如何，都将下载任何样式表，图像或脚本，不会问任何问题。
但是，经过一个快速的testing，结果有点意味着…
-
<script src="bork.js" type="bork/bork"></script> -
<script src="bork2.js" type="text/bork"></script>
Chrome 12 也不下载。
IE8下载＃2 。
Firefox 4同时下载。
Opera 11同时下载。
Safari 5赢得 两个下游。
仍然没有分析或运行发生在任何浏览器。 javascript alert(); 里面的任何一个文件不会运行。 这与CSS加载情况稍有不同，因为那里的浏览器为@include指令parsingbork CSS代码并recursion地下载这些资源。
有时候，有必要考虑平淡无奇的答案。 有可能所有的样式表都是由浏览器下载的，因为每个浏览器的作者只考虑在优化速度时有一个（主）样式表的情况，而且有很多网站只有一个样式表的做法鼓励行为。 如果没有人对此进行testing，那么几乎肯定不是正在进行优化的情况，因为人们更喜欢处理可见（或至less可测量）的结果。 也许你的问题会鼓励有人改变testing制度…
另外，我敢说，绝大多数站点的样式表都是静态文档，因此可以非常高速caching（如果网站所有者select支付，也可以通过CDN提供）。
我能想到的唯一合乎逻辑的原因是，当你dynamic地（javascript）将<link>元素的错误属性的值改变为一个可识别的值时，这个文件必须立即可用。
事实上，在某些情况下，如果您想加载文件，可以将其视为一项function，但稍后会延迟其使用情况。
所以，如果你真的不想下载的CSS文件，直到有什么事情发生，你可以尝试validation页面加载时，如果满足某些条件，如果是的话，那么你可以做一个“懒加载”，并存储注释的代码types为8的元素 ，在这种情况下就是你的样式标签 ），这将使浏览器validation新创build的内容，并下载CSS文件以使样式工作。
如果您有任何问题可能要面临实施，请不要犹豫，向我们澄清，也许我可以帮助您解决您的问题。 它几乎适用于任何东西（图像，JS，CSS等），你不希望被下载或处理，直到发生某些事情或一些限制条件满足。
我已经testing过它和IT WORKS ：D，所以你可以使用这个代码开始，希望它有帮助
<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>
答案可能归结为媒体查询。 考虑这些例如：
<link rel="stylesheet" media="(min-width: 300px)" href="example1.css" /> <link rel="stylesheet" media="(min-width: 1000px)" href="example2.css" />
如果使用窗口大小为600px的浏览器，将应用example1.css样式表。 如果窗口大小调整为1200像素，那么可以立即应用样式表example2.css，而不必等待它下载。
值得注意的是，即使不匹配的媒体查询样式表仍然被下载，它在下载时不会阻止渲染（通常在渲染开始之前需要下载所有的CSS文件）。
