html - 使用 CSS3 媒体查询时减少 HTTP 请求

Question

我正在尝试使用此处讨论的 CSS3 媒体查询技术...

http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

如果我从下方获取代码并使用某种将自身标识为具有小屏幕的设备(例如 Device Central 或 Protofluid)的模拟器在新页面上运行它，我可以在 Charles 中看到仍然发出请求对于每个 CSS 文件，即使选择了正确的样式表，这是正常行为吗？

<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">
<link rel="stylesheet" href="smartphone-landscape.css" media="only screen and (min-width : 321px)">
<link rel="stylesheet" href="smartphone-portrait.css" media="only screen and (max-width : 320px)">
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">
<link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)">
<link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)">
<link rel="stylesheet" href="widescreen.css" media="only screen and (min-width : 1824px)">
<link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">

Answer 1

是的，链接元素中的任何样式表都将被下载并动态评估媒体查询。例如，您的样式表 ipad-landscape.css 和 ipad-portrait.css 需要在有人转动他们的设备时应用，您不想等到他们这样做以开始下载样式表和任何引用的元素，它应该立即准备就绪。唯一的异常(exception)是(或可能是)备用样式表。

这个的处理模型是discussed in the HTML5 spec :

The appropriate time to obtain the resource is when the external resource link is created or when its element is inserted into a document, whichever happens last. If the resource is an alternative stylesheet then the user agent may defer obtaining the resource until it is part of the preferred style sheet set.