Flash of unstyled content

A Flash of unstyled content (FOUC) is an instance where a web page appears briefly unstyled prior to loading an external CSS stylesheet. The page corrects itself as quickly as the style rules are loaded and applied, however the shift is quite visible and distracting. After the web page appears, the viewer sees unstyled HTML morph into a differently styled document.

The aberration, called FOUC, was documented and named circa 2001(?) in an article at BlueRobot.com. At first, FOUC appeared to be a browser problem unique to Internet Explorer. More recently, FOUC behavior has been documented in Safari in a 2004 article The FOUC Problem. That author says "...FOUC has become a Safari epidemic...."

Flash of unstyled content is indifferent to changes in CSS version or HTML version, appearing to be a browser problem. And yet, it may not be so much a problem in the browser as it is a set of priorities programmed into the browser. As the browser collects HTML and all the ancillary files referenced in the markup, the browser builds the DOM (Document Object Model) on-the-fly. The browser may choose to first display what it can parse the quickest, namely the text.

FOUC appears more prevalent now, or is more frequently observed now, because HTML pages are more apt to reference multiple stylesheets. Web pages often include style references to media other than the browser screen, such as CSS rules for printers and wireless devices. Web pages may @import layers of style files, and reference alternate stylesheets. Online advertisements and other inserted offsite content, like videos and search engines, often dictate their own style rules within their code block. The cascading nature of CSS rules encourages some browsers to wait until all the style data is collected before applying it.