Sign In 
Sign In
Sign In
Coffee Room
Discuss anything here - everything that you wish to discuss with fellow engineers.
12889 Members
Join this group to post and comment.
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.
![[IMG]](proxy.php?image=http%3A%2F%2Fi.imgur.com%2FjvfSX.png&hash=7224fd2fa4aa0ca384b337c55a718557)
![[IMG]](proxy.php?image=http%3A%2F%2Fi.imgur.com%2Fs4VQU.png&hash=98e75cfeabce890deface499d9a5b199)
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:
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.
We can prevent the occurrence of FOUC in a hybrid way, not by pure CSS or JavaScript! It is a mixture of both.
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! 😀
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:AbraKaDabraSuch 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.
- 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!)