使用IE条件注释来包含CSS或JavaScript文件会导致更多的http请求

Question

网页设计师为我们创建了具有IE特定注释的页面。因此，如果用户正在使用IE的特定版本一定样式表只包括：

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

同样的技术已经被用于JavaScript文件。 不幸的是，这会导致对IE用户的HTTP请求更多，因此感知的页面加载时间更慢。通常，我的做法是将所有CSS合并到单个文件中，并将所有JS合并到单个文件中。

在CSS和/或JS文件中有这些特定于IE的注释吗？或者有什么办法可以模拟这种功能？

Answer 1

对于CSS，你可以使用IE浏览器的具体意见包围形式

<div id="IE6"> 

这可以让你通过前面加上“＃IE6”选择来实现IE6 CSS修复元素的文档内容。

欲了解更多详情，请参阅http://www.positioniseverything.net/articles/cc-plus.html

JScript中还有条件编译它可以帮助你巩固你的JS文件合并为一个。 请参阅http://msdn.microsoft.com/en-us/library/ahx1z4fs(VS.80).aspx

Answer 2

对于CSS，您可以尝试使用各种其他浏览器会忽略的选择器技巧，IE6会尊重这些选择器技巧，但这对其他人来说需要很小的性价比。

对于JS，你可以更新你的函数来检查用户代理字符串，但是这与CSS提议基本上有相同的问题。

Answer 3

那么你可以做的是使用动态生成器。在你的条件前面的例子中，你可以使用内联脚本将你的构建的参数添加到一个js数组中。那么你可以使用该数组来构建URL到你的脚本/ css，比如/assets/css/build.php?use=base,ie7和某些类似于js的。

然后在这个php（或者任何你想要的lang的风格）中，你可以使用minify或其他库来将所有的脚本/ css编译成单个文件，并去除所有的文件并传递它们。您也可以稍后缓存构建以加快交付速度。

我已将这种策略用于许多使用PHP Minify和/或各种Symfony插件的项目，这些插件可以做同样的事情。