Flash of Unstyled Content!

PraveenKumar Purushothaman · 2012-07-30T21:20:53+00:00

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:

Flash of Unstyled Content!

PraveenKumar Purushothaman
@praveenkumar-66Ze92

Updated: Oct 20, 2024

Views: 1.1K

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:

0

Replies

Howdy guest!

Dear guest, you must be logged-in to participate on CrazyEngineers. We would love to have you as a member of our community. Consider creating an account or login.

Replies

PraveenKumar Purushothaman

Member • Jul 31, 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! 😀

Are you sure? This action cannot be undone.

Cancel

Ankita Katdare

Administrator • Jul 31, 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.

Are you sure? This action cannot be undone.
Cancel
PraveenKumar Purushothaman

Member • Jul 31, 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!)
Are you sure? This action cannot be undone.
Cancel