voodish logo
tweet rss book of faces Linked In

Webpage loads with no style, no stylesheet, flash of unstyled content (FOUC)

fouc.gif

How to fix a flash of unstyled content ie. a page loads without style, without a style sheet.

Some pages that use the CSS @import rule experience a curious display quirk in the Windows version of MS Internet Explorer: a momentary flash of unstyled page content - however this has been experienced in versions of the Opera and Chrome browser.

The Problem
Browser will display a short burst of unstyled content, and then load up the stylesheet. This is normally down to using the @import rule for loading stylesheets
The Solution
It is rather crude but the way to eliminate the problem is to use one LINK element or SCRIPT element inside a document’s HEAD.

The Code to use

<head>
<title>My Page</title>
<script type="text/javascript"> </script>
<style type="text/css" media="screen">@import "style.css";</style>
</head>

*NOTE: MAKE SURE you layout the code in the example shown above; ie. the LINK or SCRIPT code before the STYLE link, otherwise it will not work.

Related Articles

Comments RSS Feed

No Comments Yet

You can be the first to comment!

Leave a comment