如果我指定一个不受支持的媒体类型("bork")的CSS链接,它仍然会被我尝试的每个浏览器下载(包括桌面和几个移动浏览器).
<link href="bork.css" media="bork" rel="stylesheet" type="text/css" />
它变得更糟......
如果文件bork.css @import是另一个CSS文件(也使用不支持的媒体类型),则第二个CSS文件也会被下载.
/* Inside "bork.css" */
@import url("bork2.css") bork, bork;
为什么!？
我的第一个假设是某些浏览器可能正在搜索它们支持的媒体类型的嵌套@import或@media块 - 然后应用这些文件中包含的样式规则......
/* Inside "bork2.css" */
@import url("all.css");
@media all {
/* rules */
}
...但据我所知,没有一个浏览器能做到这一点.(幸运的是,因为那将是一个错误.)
因此,所有这些下载似乎完全是多余的 - 除非有一些我一直错过的解释.
编辑:我想要了解的是,激励浏览器制造商:
"嘿!我们正试图让我们的浏览器疯狂!让我们下载一堆我们无意申请的CSS文件,并停止加载同时其他资源!"
Jas*_*aro 13
我认为答案是这样的:
允许和鼓励浏览器解析media描述符 - 无论描述符是什么 - 作为使它们未来友好的一种方式
HTML的未来版本可能会引入新值,并可能允许参数化值.
*来自:http://www.w3.org/TR/html4/types.html#h-6.13
通过这种方式,媒体可能有一天会包括3d-glasses或包含其他描述符bork;-)
编辑:
关于媒体查询的最新CSS3规范说,这在一定程度上支持了上述内容:
未知的媒体类型评估为false.实际上,它们与已知的与设备的媒体类型不匹配的媒体类型相同.
*来自:http://dev.w3.org/csswg/css3-mediaqueries/#error-handling
因此,它们被视为已知并下载以供使用,而不是当时/用于该设备.
小智 9
认为他们加载所有媒体查询的真正原因是因为许多设备在加载后更改了对这些查询的响应.
对页面加载时纵向的iPhone5进行成像(报告'宽度'为640px,但不是'肖像,不幸的是iSeries不支持这些查询)...然后你决定将iPhone转向侧面,浏览器现在激活伪景观模式(再次,从宽度@ 1126而不是'风景'触发).
最有可能的是,响应式网页设计被设计为将不同的样式表提供给显示在640(相当窄,可能是手机/平板电脑)的浏览器,而不是显示在1126的浏览器(更可能是笔记本电脑).
如果它没有费心加载额外的媒体查询表,那么它将突然停止,发出一个http请求,等待表单加载,然后解析它显示.这可能导致相当难看的延迟.
由于大多数浏览器遵循代码重用的模式,例如,Webkit或Gecko的核心块可能不知道它们是在笔记本电脑还是平板电脑上(好像这些线路无论如何都没有开始模糊),它只需加载每个媒体查询,无论他们是否选择显示它.
虽然这可以使每个浏览器看起来都不好看,但总体而言,它打破了媒体查询背后的大量实用工具.
手机或廉价的Android平板电脑不应该下载其根本不需要的附加文件(特别是在有限的数据计划上).
目前,我的设计使用媒体查询,但我谨慎使用它们.我网站上的大部分媒体查询都是通过javascript加载所需文件来实现的,以消除这种浪费.剩下的查询用于关闭javascript的情况,或用于需要加载的工作表"以防万一"(例如,我的640px布局通常总是被加载,因为大多数设备可能会在一种情况下显示它或另一种情况).
如果有人有更好,更清洁,处理方法,请告诉我.
与此同时,如果你能想到一个简单的实现可以绕过这个功能的功能(也许是内置于浏览器中的android风格的清单？),你可能想要给Mozilla或Chromium团队留下一条线......看起来他们可以用一只手在这一个.