Flash of Unstyled Content

The lovely people (person?) over at Blue Robot have coined a term ‘FOUC’; or Flash of Unstyled Content.

This is that annoying ‘bug’ in Windows IE where a user can see the entire body of the page their trying to view ‘unstyled’ (particularly for page layout) for a moment before the stylesheet kicks in. If the CSS is cached then you probably won’t see this happen, but for first time users this just looks amature.

Luckily for the rest of us Blue Robot have a tidy little solution :) All you need to do is add “just one LINK element or SCRIPT element inside a document’s HEAD”. Wow!

Note that the <script> or <link> tag should go before the CSS tag as follows:

1
2
3
4
<head>
<link media="print" href="print.css" type="text/css" rel="stylesheet"></link>
<style media="screen" type="text/css">@import "style.css";</style>
</head>

See the full article here

Comments