All FOUCed Up

I recently ran across a problem with CSS where IE would momentarily display unstyled content until the external stylesheets loaded. This bug is called "Flash of Unstyled Content" or "FOUC", and is documented here:

http://www.bluerobot.com/web/css/fouc.asp

This can happen if you reference your external stylesheets using @import. The fix is to use at least one link element or one script element in the head of your document. An interesting wrinkle: the link element or script element can be completely empty.

The reason I'd never encountered it before is that I never had created a page which did not use either a link element or a script element in the head element. You see, I developed a habit over the years where I specify a print media stylesheet using a link element and then include other stylesheets with the @import statement, which prevents them from being loaded by IE 3 and NS 3.