使用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插件的項目，這些插件可以做同樣的事情。