Flash of Unstyled Content

Als Flash of Unstyled Content (kurz FOUC, englisch etwa für Aufblitzen von Inhalt ohne Stil) bezeichnet man im Webdesign ein unerwünschtes Verhalten, bei dem ein Webbrowser während des Ladevorgangs eine Seite oder Teile davon kurzzeitig im Standardstil darstellt und erst anschließend die korrekten Stylesheets anwendet. Obwohl die Darstellung sehr schnell wieder korrekt ist, fällt der Wechsel oft sehr deutlich und störend auf.

Beispiel für einen Flash of Unstyled Content: Sobald das CSS geladen ist, das den Stern für die Aufnahme von Wikipediaartikeln in die Benutzerbeobachtungsliste anzeigt, ändert sich der Umbruch des Absatzes

Problem

Die meisten Webseiten trennen Inhalt und Aussehen. Während der Inhalt direkt in der HTML-Datei steht, wird das Aussehen meist in CSS-Stylesheets ausgelagert. Damit steht häufig der Inhalt bereits zur Verfügung, wenn die Stylesheets noch nicht vollständig geladen sind. Verstärkt wird diese Verzögerung dadurch, dass Stylesheets zum einen selbst weitere Dateien einbinden können, zum anderen auch dynamisch – und damit verzögert – durch JavaScript eingebunden werden können.

Nach dem Laden des Stylesheets muss der Browser die Seite neu zeichnen. Diese Änderung ist als Aufblitzen sichtbar. Zudem kann es vorkommen, dass sich durch geänderte Größen und Positionierungen Teile der Seite verschieben.

Ein verwandtes Problem wird als Flash of Unstyled Text (FOUT) bezeichnet: Es tritt auf, wenn Text in einem Webfont dargestellt werden soll. Bis die Font-Datei vom Server geladen ist, wird der Text zunächst in einer lokal vorhandenen Schriftart dargestellt, sodass sich mit dem endgültigen Laden auch hier eine sichtbare Veränderung ergibt.

Auch andere Fälle, in denen es zu einem vergleichbaren Aufblitzen während des Ladevorgangs kommt, werden teilweise als FOUC bezeichnet, auch wenn diese nicht mit dem Stil zusammenhängen.

Erstmals wurde der Flash of Unstyled Content als ein Problem im Internet Explorer beschrieben. Dieser begann mit der Darstellung des Inhalts, sobald dieser geladen war und damit noch bevor die eingebundenen Stylesheets vollständig vorhanden waren.[1] Inzwischen sind alle wichtigen Browser dazu übergegangen, mit der Darstellung abzuwarten, bis alle Stylesheets geladen sind, die im ursprünglichen Dokument direkt oder indirekt referenziert werden.[2] Ein Flash of Unstyled Content tritt damit nur noch bei mittels JavaScript geladenen Stylesheets auf.

Abhilfen

Die einfachste Lösung gegen einen Flash of Unstyled Content besteht darin, alle Stylesheets direkt im HTML-Dokument anzugeben und nicht über JavaScript zu laden. Dies kann allerdings den Ladevorgang verzögern, da der Browser auch auf Stylesheets wartet, die die anfängliche Darstellung vielleicht gar nicht beeinflussen, zum anderen kommt es häufig vor, dass Stylesheets, die nur in einigen Fällen benötigt werden, dynamisch geladen werden sollen.

Eine Möglichkeit besteht darin, die betroffenen Elemente in den ursprünglich geladenen Stylesheets zunächst auszublenden und diese Einstellung in den dynamisch geladenen Stilen dann wieder zu überschreiben.[3] Dadurch ergibt sich zwar auch eine sichtbare Änderung, wenn der Inhalt nach dem Laden plötzlich auftaucht, dies wird aber häufig nicht als so störend wahrgenommen wie wenn der Inhalt von Anfang an sichtbar ist und sich sein Aussehen stark ändert. Alternativ kann das Aus- und Einblenden auch über JavaScript geschehen, es existieren verschiedene Methoden um festzustellen, wann ein Stylesheet vollständig geladen ist.

Sollte das Laden der Seite jedoch unterbrochen werden, so sind geladene Inhalte nicht sichtbar, wogegen ungestaltete Inhalte bevorzugt sind.

Wikipedia-Artikel ohne CSS

Einzelnachweise
  1. Flash of Unstyled Content. 2001, archiviert vom Original am 7. Dezember 2013; abgerufen am 8. Mai 2017 (englisch).
  2. Ilya Grigorik: Rendering-blockierendes CSS. In: Google Developers. 9. Februar 2017, abgerufen am 8. Mai 2017 (englisch).
  3. Brad Baxter: Flash of Unstyled Content (FOUC) Tutorial. Abgerufen am 8. Mai 2017 (englisch).
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.