scottjehl / css-inapplicable-load Goto Github PK

This is awesome stuff Scott. Keep it goin' on.

It might be useful to further define how browsers handle inapplicable media queries inside iframes. Presumably the parent layout has to be complete before the iframe's viewport is defined, and thus available for load decisions? This has already come up in the FF bug discussion, and it might to useful to know exactly what's happening cross-browser.

I've been looking into this on and off for the last couple of days since stumbling across the repo. One possible solution I'm testing to prevent IE8 and lower from downloading inapplicable CSS is to use the following:

<!--[if ! lte IE 8]>-->
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 320px)" href="css/style.css" />
<!--<![endif]-->

<!--[if (gte IE 6)&(lte IE 8)]>
  <link rel="stylesheet" type="text/css" media="all" href="css/ie.css" />
<![endif]-->

It's fairly straightforward. Tell every browser but IE8 and lower to download the media queried CSS and then load up a separate file for IE8 and lower using the reverse of the same technique we're all familiar with.

I've tested the above in IE8 using browserstack and firebug to determine what stylesheets were downloaded and it appears to work.

For all I know this is a well known solution but maybe it might help someone. It may require more definitive testing.

http://jsbin.com/agEREDo/2

is an example that eagerly loads CSS but doesn't block the page rendering on IE9, IE10, IE11, recent Firefox, Chrome, Chrome Android, iOS. It works correctly on IE6, IE7, IE8 but no early loading (page is slow to render).

Same example as above with some extra xmlhttp logging to the proxy (interferes with and slows page load, but shows interesting timing information): http://jsbin.com/EPEdUXeX/4 Both are based on this experimentation page http://jsbin.com/OFeKabIY/29 (which may crash on IE8...).