Question

如果我指定了一个不受支持的媒体类型（"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文件，同时停止加载其他资源！”

Answer 1

我认为答案是：

允许和鼓励浏览器解析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

因此，它们被视为已知并已下载以供使用，而不是当时/用于该设备。

Answer 2

认为加载所有媒体查询的真正原因是因为许多设备在加载后会更改对这些查询的响应。

对页面加载时处于纵向状态的iPhone5进行成像（报告'宽度'为640px，但不是'肖像，不幸的是，iSeries不支持这些查询）...然后您决定将iPhone侧身和浏览器现在激活伪景观模式（再次，从宽度@ 1126而不是'风景'触发）。

最有可能的是，响应式网页设计旨在将不同的样式表提供给显示在640（相当狭窄，可能是手机/平板电脑）的浏览器，而不是显示在1126的浏览器（更可能是笔记本电脑）。 / p>

如果它没有打扰加载其他媒体查询表，那么它将突然停止，发出一个http请求，等待表单加载，然后解析它以显示。这可能导致相当难看的延迟。

由于大多数浏览器遵循代码重用的模式，例如Webkit或Gecko的核心块可能不知道它们是在笔记本电脑还是平板电脑上（就好像这些线路无论如何都没有开始模糊），它只是加载每个媒体查询，无论他们是否选择显示它。

虽然这可以使每个浏览器看起来都不好看，但总体而言它打破了媒体查询背后的一大块实用工具。

手机或便宜的Android平板电脑不应该下载其根本不需要的附加文件（特别是在有限的数据计划上）。

目前，我的设计使用媒体查询，但我谨慎使用它们。我网站上的大部分媒体查询都是通过javascript加载所需文件来实现的，以消除这种浪费。剩下的查询用于关闭javascript的情况，或用于需要加载的工作表“以防万一”（例如，我的640px布局通常总是加载，因为大多数设备可能会在一种情况下显示它或另一种情况）。

如果有人有更好，更清洁，处理方法，请告诉我。

与此同时，如果你能想到一个简单的实现可以绕过这个功能的功能（也许是内置于浏览器中的android风格的清单？），你可能想要给Mozilla或Chromium团队留下一条线......似乎就像他们可以用手一样。

Answer 3

在考虑了这个之后，我形成了一个理论，即工作中可能存在一个通用的“规则” - 无论指定的mime类型或媒体属性如何，都可以下载任何样式表，图像或脚本，不会出现任何问题

然而，经过快速测试后，结果有点暧昧......

<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 Win 下载。

在任何浏览器中仍然没有解析或运行。任一文件中的javascript alert();都不会运行。这与CSS加载情况略有不同，因为浏览器会解析bork - @include指令的媒体CSS代码，并以递归方式下载这些资源。

Answer 4

有时候，有必要考虑平淡无奇的答案。浏览器可能会下载所有样式表，因为每个浏览器的作者只考虑在优化速度时存在单个（主）样式表的情况，并且许多具有单个样式表的站点的实践鼓励这样做行为。如果没有人对它进行测试，那几乎肯定不是优化的情况，因为人们更喜欢处理可见（或至少可测量）的结果。也许你的问题会鼓励某人改变测试制度......

此外，我敢说绝大多数网站的样式表都是静态文档，因此能够高度缓存（如果网站所有者选择付费，也可以通过CDN提供）。

Answer 5

我能想到的唯一合乎逻辑的原因是，当你动态地（javascript）将<link>元素的错误属性的值更改为已识别的元素时，文件必须可用马上。
事实上，在某些情况下，如果您想要加载文件但是将其设备推迟以供日后使用，则可以将其视为一项功能。

Answer 6

因此，如果您确实不想下载CSS文件，那么您可以尝试验证页面何时加载，如果满足某些条件，那么您可以执行 {{3} 并在新创建的样式标记子项中存储已注释的代码（类型8元素，在本例中为样式标记），这将是使浏览器验证新创建的内容，并下载CSS文件以使样式生效。

您可能面临的任何问题都在尝试实施它，请不要犹豫，要求澄清，也许我可以帮助您解决问题。它适用于几乎任何东西（图像，js，css等），你不想下载或处理，直到发生某些事情或满足某些限制。

我已经测试了它并且 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>

Answer 7

答案可能归结为媒体查询。考虑这些例如：

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

如果使用窗口大小为600px的浏览器，则将应用example1.css样式表。如果窗口调整为1200px，则可以立即应用样式表example2.css，而无需先等待它下载。

值得注意的是，即使仍然下载了不匹配的媒体查询样式表，它也不会在下载时阻止渲染（通常在渲染开始之前需要下载所有CSS文件）。

为什么所有浏览器都下载所有CSS文件 - 即使是他们不支持的媒体类型？

7 个答案: