Using IE conditional comments to include CSS or JavaScript files results in more http requests

Question

A web designer has created pages for us with IE-specific comments. Consequently, certain stylesheets are only included if the user is using a specific version of IE:

<!--[if lt IE 7]>
<link type="text/css" rel="stylesheet" href="/styles/ie6-fixes.css" media="screen"  />
<![endif]-->

The same technique has been used for JavaScript files. Unfortunately, this results in more HTTP requests for IE users, so the perceived page load time is slower. Generally, my practice is to combine all CSS in a single file, and all JS in a single file.

Is there a way that these IE-specific comments within CSS and/or JS files themselves? Or is there a way I can simulate this functionality?

Answer 1

For CSS, you could try to use various selector tricks that other browsers would ignore and IE6 would respect, but this entails a small perf cost for everyone else.

For JS, you could update your functions to check the User-Agent string, but that has basically the same problems as with the CSS proposal.

Answer 2

Well what you could do is use a dynamic builder. Fore example in your conditionals you could use inline scripting to add paramters for your build to a js array. then you could use that array to build the url to your script/css like /assets/css/build.php?use=base,ie7 and somethign similar for js.

Then in this php (or whatever flavor of lang you want) you could use minify or some other library to compile all the scripts/css into single files and strip all the cruft and deliver them. You can also then cache the builds for faster delivery later.

Ive used this strategy on a number of projects with PHP Minify and/or Various Symfony plugins that do the same thing.

Answer 3

For Internet Explorer, it's possible to target only IE6 or IE7 using special prefixes to your rule to minimise http requests.

For example:

div {
    background: #fff;   /* All browsers */
    *background: #000;  /* IE7 & Below */
    _background: #BBB;  /* Just IE6 */
}

(Source: http://net.tutsplus.com/videos/screencasts/quick-tip-how-to-target-ie6-and-ie7-with-only-two-characters/)

Answer 4

For CSS you can use IE-specific comments to surround the document content in an element of the form

<div id="IE6">

This could allow you to implement IE6 CSS fixes by prepending selectors with "#IE6 ".

For more details see http://www.positioniseverything.net/articles/cc-plus.html

JScript also has conditional compilation which may help you consolidate your JS files into one. See http://msdn.microsoft.com/en-us/library/ahx1z4fs(VS.80).aspx