Jan 14, 2009
“Back the FOUC up”
The division of presentation and structure is what makes the XHTML/CSS combo so delightful. XHTML logically divides your content while CSS appropriately applies the style. Two peas in a pod, really.
When creating a website, I’ve encountered the FOUC bug. This vulgar sounding bug stands for Flash Of Unstyled Content. When visiting a webpage for the first time, before the stylesheet is cached locally, you’ll get a flash of the page contents without any styles applied. Kinda like someone walking in on you in the shower when you’re hair is shampoo’d into a mowhawk and you’re belting out the lyrics to Britney Spear’s smash hit, Womanizer. It’s a bit awkward seeing something you weren’t supposed to.
Problem: The cause of the bug has been traced to using the “@import” rule in your header section used to call in the stylesheet.
Instead of:
</head>
<title>My Page</title>
<style type=”text/css”>
@import “style.css”;
</style>
</head>
Use:
<head>
<title>My Page</title>
<link rel=”stylesheet” type=”text/css” media=”print” href=”print.css”>
<style type=”text/css”>
@import “style.css”;
</style>
</head>
According to Rob @ Bluerobot.com, the above method solves the problem. With an addition of a link in the header section, the FOUC bug disappears. In the example above, the link doesn’t actually link to anything. Since it’s there, why not link to a media dependent stylesheet, say for print or handheld devices? A blank link is a terrible thing to waste.
- bang.
Leave a Reply