CSS-Importbug gelöst

Cornelia ( http://www.clkm.de ) hat eine Lösung zum Bug aus http://xwolf.blogger.de/stories/47946/ gefunden.

Der Hintergrund ist wohl der, daß bei komplexen Stylesheets, die auch weitere Stylesheets includen, es zu einem Ladezeitproblem kommt.
Opera, Mozilla und Mozilla Firebird unter Windows laden offenbar die CSS-Dateien, die in einer anderen CSS-Datei mit @import url(); eingebunden werden, nicht unbedingt in der richtigen Reihenfolge.

Wenn Stylesheets jedoch in einer falschen Reihenfolge definiert werden, die nahezu zufällig ist (da die Dateien nacheinander über Netz kommen), kann die Gestaltung der gesamten Webseite auseinanderfliegen.

Die Lösung:

Vor dem Einbinden mit <link rel> in der HTML-Datei werden die CSS-Dateien vorgeladen mit @import.

Beispiel:

	<link rel="stylesheet" type="text/css" href="/css/rrzenn4.css" />
	<style type="text/css">
	@import url(/css/rrzemain.css);
	@import url(/css/rrzeseiten.css);
	</style>
	<link rel="stylesheet" type="text/css" media="screen,projection" title="default" href="/css/boxes.css"/>
	<link rel="alternate stylesheet" type="text/css" media="screen,projection" title="noleftbox" href="/css/noleftbox.css" />
	<link rel="alternate stylesheet" type="text/css" media="screen,projection" title="norightbox" href="/css/norightbox.css" />
	<link rel="alternate stylesheet" type="text/css" media="screen,projection" title="noboxes" href="/css/noboxes.css" />
	

Alternativ kann man natürlich in der HTML-Datei auch gleich mit @import arbeiten.
Dies hat jedoch zwei Nachteile in der Usability der Seite:
1. Man kann keinen JavaScript-Styleswitcher einbauen
2. der im Browser vorhandene Styleswitcher „sieht“ die Styles nicht als solche. (Beispiel Mozilla: „View->Use Style“)