FOUC - Flash Of Unstyled Content - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

FOUC - Flash Of Unstyled Content

imported CSS seems to load after HTML BODY, linked CSS before

Solution1

11:02 am on May 15, 2003 (gmt 0)

On a new site I used only @import to load CSS files (to get rid of Netscape 4 problems). I noticed that on IE6, when the page is loading somewhat slow, that initially the non-CSS version of the page displays. The CSS formatting is applied somewhat later.

I tried if linked CSS files have the same effect, but it seems they don't. CSS formatting is applied immediately.

This doesn't seem to be happening with Opera 7.11 or Netscape 7.01.

Has anyone else noticed this?
I don't like it, so I'd want to do something about it.

BlobFisk

11:13 am on May 15, 2003 (gmt 0)

Welcome to WebmasterWorld, Solution1!

This seems to be the FOUC bug! FOUC is Flash of Unstyled Content that happens only with Windows versions of IE when using the @import rule.

Bluerobot has an article on this here [bluerobot.com].

HTH

Nick_W

11:17 am on May 15, 2003 (gmt 0)

Yes, thanks Blobfisk and Welcome to WebmasterWorld [webmasterworld.com] Solution1.

I changed the title so we'd have a decent reference point for this as it crops up from time to time...

Nick

BlobFisk

11:26 am on May 15, 2003 (gmt 0)

It's worth mentioning the proposed solution. One way to prevent this is to have a <link> or <script> tag in your document <head> section.

The addition of either of these removes the bug completely! If you have no need for a script and want to stick with using @import (quite rightly!), then the proposal is the addition of an empty script!

As Bluerobot says, it's very much a hack, but heck (:o) it works!

Solution1

12:14 pm on May 15, 2003 (gmt 0)

Thanks guys!

This seems to solve it. I decided to give the Netscape 4 users a tiny bit of CSS-formatting.

drbrain

4:29 pm on May 16, 2003 (gmt 0)

You can get a similar effect with gecko browsers (Mozilla, NS6/7) if the browser starts rendering the page before the CSS file is fetched. In this case, there's no way to fix the problem, other than by getting a better network connection.