Discover ways to stop Flash of Unstyled Content (FOUC) from occurring on your sites or at least reduce the possibility that your sites will be affected by it.
I am sure you have seen web pages load with unstyled content, and then it might be a few seconds (or minutes) before you see what may or may not be the page's intended look and feel. In web design, this aberration is called the unintended Flash of Unstyled Content (FOUC). Figure A displays an example of the FOUC anomaly on the CNN U.S. Edition front page where the CSS failed to load.
In this article, I will share some background about FOUC, and then describe ways
to stop FOUC from occurring on your websites or at least reduce the
possibility that your websites will be affected by it, no matter the browser or
A brief history
Techniques to minimize FOUC
The examples given in the short presentation include <style> and <script> suggestions for class and id names, as well as placement for code examples within the web page's <head> and <body> elements. The presentation is also available for download as a PDF from Google docs. The screen capture shown in Figure B displays two pages from the document representing the code snippets that Brad shares for handing FOUC.
A technique that is a no-brainer for most web developers is that you must include your link tag(s) to stylesheets within the <head> of your web page documents. Steve Souders makes this point in his Rule #5 - Put Stylesheets at the Top (which is part of his list of 14 Rules for Faster-Loading Web Sites). His Rule #5 page demonstrates this by having the stylesheet added to the bottom of the body just before the closing </body> tag. The FOUC in action on this page can be seen as displayed in Figure C with the before and after screen captures.