Developer

Prevent the flash of unstyled content

Have you ever seen a brief glimpse of unstyled text appear as a CSS-styled Web page loads in the browser window? Our usability expert Michael Meadhra shows you how to avoid this little quirk.


This article originally appeared in the Design & Usability Tactics newsletter. Click here to subscribe automatically.

Have you ever seen a brief glimpse of unstyled text appear as a CSS-styled Web page loads in the browser window? It's as if the browser displays the unstyled text from the HTML page for the second or so that it takes to load the CSS style sheet file and apply the styles to the page.

The phenomenon is common, but it doesn't happen with all pages or with all browsers. In fact, it appears only on some pages rendered in the Windows version of Internet Explorer (version 5+), and, even then, it doesn't occur every time the page loads.

This phenomenon has been dubbed the Flash of Unstyled Content, or FOUC, and there's a curious lack of information available about it. I did find an article on the BlueRobot site that attempts to diagnose the cause of the problem and offers a couple of workarounds. I haven't seen much corroboration for the article, but the proposed solutions appear to work, so I'll pass them along to you in the interest of helping fellow Web builders eliminate FOUC from your pages.

What causes FOUC?
The FOUC appears only during the initial page load of a page that uses the CSS @import rule to reference the CSS style sheet.

After the imported CSS style sheet is available in IE's cache, subsequent page loads of the same page (or of other pages that use the same CSS style sheet) don't exhibit the FOUC quirk. Furthermore, the FOUC quirk doesn't appear if the HTML document head contains scripts or a linked CSS style in addition to the @import rule.

Workarounds for FOUC
The secret to an effective workaround for the FOUC quirk lies in the fact that FOUC doesn't occur if there are links or scripts in the document head along with the @import rule. Therefore, any of the following situations will prevent FOUC:
  • Replace the @import rule with a link to the CSS style sheet. This is probably the simplest solution of all.
  • Add a link to another CSS style sheet. The added style sheet should be one that adds legitimate features to the page, such as an alternate style sheet for another browser or media. However, a link to a copy of the imported style sheet or even an empty style sheet file is enough to prevent FOUC. A link to a base document or other file will also work.
  • Add a script to the document head. This solution isn't recommended unless the Web page has a legitimate need for the script, but there are so many useful scripts that it's rarely a problem. If your page contains scripts in the head, you don't need to look for any other FOUC-prevention techniques.

Employing one of these simple solutions will prevent your pages from sometimes displaying the distracting FOUC quirk when viewed in IE.

Editor's Picks