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.
Figure A

See an enlarged view of Figure A.
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
device.
A brief history
When FOUC was first documented in the 2001 article Flash of Unstyled Content, the problem appeared to be unique to Internet Explorer. Then the glitch found its
way into Safari in 2006, and it was described in the article The FOUC Problem. Both articles
exposed the nature of the irregularity inherent with CSS rendering properly within
these two browsers and their inability to render styled content on a consistent
basis. Recent indications show
that FOUC also occurs with certain JavaScript and jQuery implementations where
the scripts are used for styling, images, typically content that takes longer
or hangs after the page loads.
Techniques to minimize FOUC
The first technique is presented in a FOUC tutorial by Brad Baxter. He outlines a simple method for minimizing FOUC by hiding all or part of
the web page until all styles and JavaScript are finished by applying a class
name “js” as the selector that hides all content within a container
that has an id=”fouc”. The “fouc” element is unhidden using
a JavaScript getElementById function setting the display value to “block”
level.
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.
Figure B

See an enlarged view of Figure B.
Another short FOUC tutorial that uses this same technique is presented by John Polacek. He uses the <style>
and <script> with a JavaScript method to set a “no-fouc” class
name to display equals none, which hides the specified content until the page is
fully loaded. The code is also available from GitHub Gist.
Another FOUC lesson that uses a similar technique is by Karl Swedberg. He demonstrates one way of
using jQuery to avoid FOUC when JavaScript is utilized for applying styles on
web page loads; he even provides a demo test page
that flashes a yellow highlighted list, which is initially hidden on page load. In
Karl’s other test page, the FOUC is virtually eliminated by placing scripts at the bottom of
the page. One of the main takeaways with the <script> technique is to
make sure you put all scripts at the bottom of the web page.
A technique that’s similar is described in Paul Irish’s blog post Avoiding the FOUC v3.0. He utilizes a unique CSS for the
non-JavaScript user, so there is no need to write .js in front of every
selector for popular functions such as accordions, image sliders, and the like.
His solution is to add a class=”no-js” to the html tag, and then he
adds one <script> within the <head> that changes it back to ‘js’. I have not played around with this
method, but according to Paul, this approach is also used in Modernizr to set the classes on the HTML
element when the <body> loads.
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.
Figure C

See an enlarged view of Figure C.
I’m sure this last technique is in use by most web developers. While some of the JavaScript techniques may be in use, they’re probably not utilized as much as they could be. I suggest you take these underutilized
methods for avoiding the FOUC, and see if you can win the fight with your websites.