Flash of Unstyled Content

Sometimes it's a good idea to hide your CSS rules from older browsers. Why? Because older browsers, version 4.0 of Netscape and Internet Explorer/Win, had flaky support of CSS. You can move basic CSS rules into one external style sheet and <link> it, while advanced CSS rules go into another style sheet which you @import.

For example:

<link rel="stylesheet" type="text/css" media="all" 
                           href="/styles/simple.css" />
<style type="text/css" media="all">
/* <![CDATA[ */
@import "/styles/advanced.css";
/* ]]> */
</style>

The CDATA fudge is there if you serve your markup as XML.

Back to my point. Internet Explorer/Windows has this weird bug—under certain conditions, when you @import a style sheet, your page will display raw, without any styles applied for a second or less and then the styles kick in. An unpleasant visual effect. This behavior is dubbed the Flash of Unstyled Content. This is something I encountered myself a couple of times.

I believe its discovery and invention of a fix belongs to Rob Chandanais. Be sure to read his article, Flash of Unstyled Content (FOUC) to learn how to get rid of this nuisance. The fix is simple, very simple like most ingenious inventions.