IE Frage: Wie viele CSS-Includes kann es verarbeiten?

Question

Ich stieß auf ein seltsames Verhalten, als ich Drupal behandelte. Ich habe ein paar Module gedreht, die 5 bis 10 Link-Tags zu der Seite hinzugefügt haben. Während diese neuen Stylesheets der Kaskade in Firefox hinzugefügt wurden, löschte der Browser in IE8 die zuvor hinzugefügten CSS-Dateien aus der Hierarchie. Tatsächlich waren die ersten Dateien die ersten, die das Styling der Seite komplett durcheinander brachten und mich für eine Weile am Kopf kratzten. Irgendwann entdeckte ich, dass die neu hinzugefügten Module dazu führten, dass IE einen internen Schwellenwert überschritt, wo es keine neuen Includes mehr hinzufügen konnte.

Hat jemand dieses Verhalten schon mal gesehen? Ich bin mir nicht sicher, ob es ein Problem mit dem Browser oder mit meinem Setup ist.

Answer 1

Internet Explorer hat eine maximale Anzahl von 32 CSS-Dateiverknüpfungen. Definitiv ein Browserproblem. Sie müssen über die Konsolidierung Ihrer CSS-Anfragen nachdenken.

Im Allgemeinen können Sie dies tun, indem Sie sie verketten, wenn sie statische Dateien sind, aber wenn Sie sie programmatisch generieren, müssen Sie möglicherweise eine Lösung suchen, um die Antwort zu manipulieren, bevor sie an den Browser übergeben wird.

Wir mussten dieses Problem für unser ASP.Net-Projekt umgehen und schrieben einen "Css Multiplexor", der die Antwort prüfte, die angeforderten CSS-Links fand, eine Web-Ressource für eine große CSS-Datei erzeugte und ausgab stattdessen einen Link dazu.

Answer 2

Ich habe dieses Problem auf unserer Website gefunden.

IE8 erlaubt nur 32 CSS-Importe pro Datei. Diese Datei könnte eine HTML-Datei oder eine CSS-Datei sein. (*) Das Importlimit beschränkt Sie jedoch nicht auf insgesamt 32 CSS-Dateien. Sie können im HTML-Code zwei CSS-Dateien verknüpfen, von denen jede 32 CSS-Dateien importiert. Das Spielen mit solchen Tricks sollte dir so viele bringen, wie du brauchst.

Die spezifische Problemumgehung, die wir verwenden, besteht darin, die benötigten CSS-Dateien in zwei Gruppen aufzuteilen und zwei "Import" -CSD-Dateien zu erstellen. Die HTML-Seite importiert die erste Import-CSS-Datei, die die erste Gruppe importiert, und die zweite Import-CSS-Datei, die die zweite Gruppe importiert.

Dies funktioniert zwar, führt jedoch zu vielen HTTP-Anforderungen. Daher verwenden wir diese Problemumgehung nur auf Entwicklungssystemen. Für unsere Live-Sites haben wir einen Build-Schritt, der das gesamte CSS in eine Datei kompiliert.

Was Johannes erwähnt hat - Drupal bekommen Ihre CSS zu aggregieren - klingt wie die beste Wahl.

(*) Es gibt einige Kleingedruckte wie: die 32 Importe enthält die CSS-Dateien, die bereits in der Kette von Ihrer HTML-Seite importiert wurden. Wenn also Ihr HTML eine CSS-Datei importiert, kann diese CSS-Datei nur 31 andere CSS-Dateien der zweiten Schicht importieren, und jede CSS-Datei der zweiten Schicht kann nur 30 andere CSS-Dateien der dritten Schicht importieren. Sie müssen sich wirklich fragen, welcher bizarre Algorithmus diese Einschränkung verursacht ...

Answer 3

Das Limit ist 31 - NICHT 32!

Während einige sagen würden "Wen kümmert es, nahe genug, oder?" --- Bei größeren Anwendungen mit Hunderten von Entwicklern kann es für die Seite sehr einfach sein, das Limit zu überschreiten. Sie sollten also wirklich wissen, wie viele CSS-Stylesheets auf der Seite enthalten sein können.

Es gibt mehrere Möglichkeiten, das Problem zu mildern:

1. die Anzahl der CSS-Dateien reduzieren, indem sie in größere Dateien zu konsolidieren - vielleicht manuell oder einige Laufzeit Gruppierungsmechanismus, oder Sie können einen automatisierten CSS-Compiler kombinieren und minimieren alle CSS-Dateien
2. Verwenden @import url(...) Aussagen eher als <link href=""> aber erinnern Sie sich nur 31 @import haben kann (auch hier nicht mehr als 32 ...) Anweisungen in einem Sheet

verwendbares # 2 oben mit Vorsicht, weil:

1. Sie erhöhen nur die Grenze (zu 961 CSS-Dateien) nicht entfernen
2. Der Browser wird gezwungen, die CSS-Dateien in Serie zum Download statt in Parellel. Normalerweise kann ein Browser mehr als eine CSS-Datei gleichzeitig herunterladen (die Anzahl hängt davon ab, ob sich die Dateien in derselben Domäne befinden und welcher Browser Sie verwenden). Dies kann erhebliche Auswirkungen auf die Leistung haben.
3. Jede CSS-Datei erfordert eine Hin- und Rückfahrt zum Server, wodurch zusätzliche Zeit hinzugefügt wird.