Skip to content

Flash of Unstyled Content - in FireFox 3

Apr 28, 2009 1 min read #css #html #javascript

This post is more than 18 months old. Technology changes quickly, so some of this content may be out of date (but that's not always the case). Please verify any technical or programming information against the current release.

So I’ve heard of the Flash of Unstyled Content before - but never really had this problem. I always use a link tag for my stylesheets.

However, I just ran into it today - in FireFox even with a link tag…

Fixing Flash of Unstyled Content in Firefox

Simple really - I was loading way too much javascript before my stylesheet (not my fault on the large amount of js!!) - and the delay was causing the flash. I moved the link to the very first part of the content - and presto - good to go.

So, instead of

<head>
  <script src="#"></script>
  <script src="#"></script>
  <script src="#"></script>
  <script src="#"></script>
  <link href="#" type="text/css" rel="stylesheet"></link>
</head>
html

Just move it to the top:

<head>
  <link href="#" type="text/css" rel="stylesheet"></link>
  <script src="#"></script>
  <script src="#"></script>
  <script src="#"></script>
  <script src="#"></script>
</head>
html

… next battle, getting rid of sooo much js ;)

Go to all posts