1. CSS sollte über der Struktur platziert werden (normalerweise innerhalb des Kopfelements). CSS ist eine interpretierte Sprache und Firefox und IE rendern nichts, bis sie auf den Abschluss der CSS-Übertragung warten. Nur durch das Voranstellen von CSS kann die Seite gerendert werden, wenn der Browser die Struktur analysiert.
Beispiel-Quellcode:
Dies verursacht das Problem mit dem leeren weißen Bildschirm. Die Seite ist völlig leer, bis das Stylesheet unten heruntergeladen wird. Bei dieser Seite wartet der Browser darauf, dass das Stylesheet geladen wird, bevor er etwas anderes darstellt die Seite, sogar der statische Text.
Das daraus resultierende Problem besteht darin, dass die Seite für eine Weile „einfach“ und plötzlich wieder „wunderschön“ ist, was zu einer sehr schlechten Benutzererfahrung führt.
2. Versuchen Sie, die Stilimportmethode <link rel="stylesheet" href="http://www.cnwebshow.com/123.css" type="text/css"> zu verwenden, und reduzieren Sie die Verwendung von @import. geschweige denn die Verwendung mehrerer Ebenen von verschachteltem @import. Denn im IE entspricht @import dem Platzieren von <link> am Ende der Seite.
Beispiel-Quellcode
Dies ist eine gültige Syntax, aber selbst wenn sie sich im HEAD des Dokuments befindet, unterbricht sie das progressive Rendering und verursacht stattdessen den leeren weißen Bildschirm und das Flashen von „Unstyled“.