开发者

Reducing HTTP request when using CSS3 media queries

I'm trying to use the CSS3 media query techniques discussed here...

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

If I grab the code from below and run it on a new page using some sort of emulator that identifies itself as a device with a small screen (e.g. Device Central or Protofluid) I can see in Charles that a request is still made for each CSS file even though the correct stylsheet is picked up, is this normal behaviour?

<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" me开发者_StackOverflow社区dia="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">


Yep, any stylesheets in a link element will be downloaded and the media queries evaluated dynamically. For instance your stylesheets ipad-landscape.css and ipad-portrait.css would need to be applied when someone turns their device round, you don't want to wait until they do that to start downloading the stylesheet and any referenced items, it should be ready right away. The only exception is (or could be) alternate stylesheets.

The processing model for this is 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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜