Flash of unstyled content
As Flash of Unstyled content (short FOUC , English as for flash content without style ) is called in the Web undesirable behavior, in which a Web browser while charging a page or parts of it for a short time is the default style and only then the correct style sheets apply. Although the display is correct again very quickly, the change is often very clear and annoying.
problem
Most websites separate content and appearance. While the content is directly in the HTML file, the appearance is mostly outsourced to CSS stylesheets. This means that the content is often already available if the style sheets have not yet been fully loaded. This delay is exacerbated by the fact that stylesheets can, on the one hand, include additional files themselves, and, on the other hand, can also be dynamically integrated - and thus delayed - by JavaScript .
After loading the stylesheet, the browser must redraw the page. This change is visible as a flash. In addition, it can happen that parts of the page are shifted due to changed sizes and positioning.
A related problem is known as Flash of Unstyled Text ( FOUT ): It occurs when text is to be rendered in a web font . Until the font file has been loaded from the server, the text is initially displayed in a locally available font, so that when the font is finally loaded, there is also a visible change here.
Other cases in which there is a comparable flash during the charging process are sometimes referred to as FOUC, even if these are not related to the style.
For the first time, the Flash of Unstyled Content was described as a problem in Internet Explorer . This began with the display of the content as soon as it was loaded and thus even before the integrated style sheets were completely available. In the meantime, all major browsers have switched to waiting until all stylesheets that are directly or indirectly referenced in the original document have been loaded. A Flash of Unstyled Content only occurs with stylesheets loaded using JavaScript.
Remedies
The simplest solution against a Flash of Unstyled Content is to specify all stylesheets directly in the HTML document and not to load them via JavaScript. However, this can delay the loading process, as the browser also waits for stylesheets that may not affect the initial display. On the other hand, it often happens that stylesheets, which are only required in some cases, should be loaded dynamically.
One possibility is to initially hide the affected elements in the originally loaded stylesheets and then to overwrite this setting in the dynamically loaded styles. This also results in a visible change if the content suddenly appears after loading, but this is often not perceived as being as annoying as if the content is visible from the start and its appearance changes significantly. Alternatively, you can hide and show using JavaScript. There are various methods of determining when a stylesheet is fully loaded.
Individual evidence
- ↑ Flash of Unstyled content. 2001, archived from the original on December 7, 2013 ; accessed on May 8, 2017 (English).
- ↑ Ilya Grigorik: Render -blocking CSS. In: Google Developers. February 9, 2017, accessed May 8, 2017 .
- ↑ Brad Baxter: Flash of Unstyled Content (FOUC) Tutorial. Retrieved May 8, 2017 .