Flash of Unstyled Content!

Introduction

This is a big issue in many of the Websites. First lets see what is FOUC! The style part of a website is given by CSS. It contains all the presentation rules and stuff. When the CSS files are removed, it is just the markup with the browser's default way of representing!

Where and Why does it first of all come?

Web Developers are mostly concerned about performance and delivery of content rather than style. So, what they do is, they used to push the content first to the users and then after the page is loaded, the CSS Files and JavaScript files are loaded! This is one of the main reason, the page loads before the CSS gets loaded and the default rendering of the markup without any styles are shown.

So how does it affect users?

As the name says, it is just a flash for a few seconds only. Some crazy people would have captured it. For eg., lets take our CE Website, and see how it looks without style and after the CSS Files get loaded.

When the FOUC comes for a few seconds, the site looks this way:

And after the CSS Files get loaded, it displays this way:

Praveen Kumar Purushothaman

Branch Unspecified

31 Jul 2012

Prevention of FOUC

We can prevent the occurrence of FOUC in a hybrid way, not by pure CSS or JavaScript! It is a mixture of both.

<html>
  <head>
    <!-- etc. -->
    <style type="text/css">
      .js #flash {display: none;}
    </style>
    <script type="text/javascript" src="/scripts/jquery.js"></script>
    <script type="text/javascript">
      $('html').addClass('js');
      $(document).ready(function() {
        // Stuff to do as soon as the DOM is ready
        $('#flash').hide();
      });  
    </script>
  </head>
  <body>
    <!-- etc. -->
  </body>
</html>

Till the full page loads, the page will be plain white. And after the page load, the jQuery will hide the mask, showing the contents. 😀 Hope this helps someone! 😀

Ankita Katdare

Computer Science

31 Jul 2012

Such a nice tutorials! Thanks Praveen for this nice write-up. FOUC is indifferent to changes in CSS version or HTML version. When the internet connection is really slow, we get to see FOUC web pages I guess.

Praveen Kumar Purushothaman

Branch Unspecified

31 Jul 2012

AbraKaDabra
Such a nice tutorials! Thanks Praveen for this nice write-up. FOUC is indifferent to changes in CSS version or HTML version. When the internet connection is really slow, we get to see FOUC web pages I guess.

Kind of yes. But it happens in following cases:

When the latency to the CSS files is long.
When the content of page is too large.
When the CSS file has @import declarations inside. (Weird, but causes!)

Share this content on your social channels -

Only logged in users can reply.