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

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 p开发者_开发百科age 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?

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

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.

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.