IE問題：它可以處理多少個CSS？

Question

我在遇到Drupal時遇到了一個奇怪的行爲。我翻了幾個模塊，添加了5到10個鏈接標籤到頁面。雖然這些新樣式表已添加到Firefox中的級聯中，但在IE8中，通過添加這些新樣式表，瀏覽器會放棄較早添加的層次結構CSS文件。事實上，第一批文件是第一批去的，它完全搞砸了頁面的樣式，讓我撓了一下頭腦。最終我發現新添加的模塊已經導致IE通過一些內部的門檻，無法再添加新的內容。

有沒有人見過這種行爲？我不確定這是瀏覽器還是我的設置問題。

Answer 1

Internet Explorer的最大限制爲32個CSS文件鏈接。絕對是一個瀏覽器問題。你需要考慮鞏固你的CSS請求。

通常，如果它們是靜態文件，您可以通過連接它們來完成此操作，但是如果您是以編程方式生成它們，則可能必須查看解決方案以在將響應傳遞到瀏覽器之前對其進行操作。

我們必須爲我們的企業ASP.Net項目解決這個問題，並最終編寫了一個「Css Multiplexor」來檢查響應，找到請求的CSS鏈接，爲一個大的css文件生成一個web資源，並輸出取而代之的是一個鏈接。

Answer 2

我在我們的網站上遇到此問題。

IE8只允許每個文件導入32個CSS。該文件可以是HTML文件或CSS文件。 （*）但是，導入限制不會限制您總共32個CSS文件。您可以鏈接到HTML中的兩個CSS文件，每個文件都包含@import 32個CSS文件。玩這樣的技巧應該讓你儘可能多地滿足你的需求。

我們使用的具體解決方法是將我們需要的CSS文件分成兩組，並有兩個「導入」CSS文件。 HTML頁面導入第一個導入CSS文件，該文件導入第一個組和導入第二個組的第二個導入CSS文件。

這工作正常，但會導致很多HTTP請求，所以我們只在開發系統上使用此解決方法。對於我們的現場網站，我們有一個將所有CSS編譯成一個文件的構建步驟。

什麼約翰內斯已經提到 - 獲取Drupal來聚合你的CSS - 聽起來像是最好的選擇。

（*）這裏有一些精美的打印內容：32個導入包括已從HTML頁面導入鏈中的CSS文件。因此，如果您的HTML導入CSS文件，那麼該CSS文件只能導入其他第二層CSS文件，而每個第二層CSS文件只能導入30個其他第三層CSS文件。你真的不知道什麼奇怪的算法造成這種限制...

Answer 3

限制是31 - 不32！

雖然有人會說「誰在乎，夠接近，對吧？」 ---對於擁有數百名開發人員的大型應用程序，頁面超出限制可能非常容易，所以您應該確切知道頁面上可以包含CSS樣式表的確切數量。

有幾種方法來緩解這個問題：

1. 通過整合到更大的文件減少CSS文件的數量 - 可能是手動，還是有些運行時間分組機制，也可以使用自動CSS編譯器結合起來，最大限度地減少您的所有CSS文件
2. 使用@import url(...)語句，而不是<link href="">但要記住，你只能有31 @import（再次，不是32 ...）在一個樣式表聲明

使用＃2以上謹慎，因爲：

1. 你只增加了限制（以961個css文件）不刪除它
2. 瀏覽器將被強制下載CSS文件系列，而不是中並行。通常，瀏覽器可以一次下載超過1個css文件（計數取決於文件是否位於同一個域中以及您使用的瀏覽器） - 這可能會對性能產生重大影響。
3. 每個CSS文件都需要往返服務器的往返時間，這會增加額外的時間。