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:
Replies
-
PraveenKumar PurushothamanPrevention 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. -
Ankita KatdareSuch 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.
-
PraveenKumar Purushothaman
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!)
You are reading an archived discussion.
Related Posts
Name:maryam omowuumi lawal
*Engineering Trade:
computer science
*Occupation:
student
*Hobbies & Interests:
reading and travelling
*Aim in life:
to be a great computer scientist
*I joined CrazyEngineers because:
i want...
Please i need you to suggest topics for my final year project.
Today failure of northern, northern-east grid causes 19 state in dark while just one day ago the same northern grid failed and recovered partially.
Can some one explain, what exactly...
i am doing my btech in indian institute of space science and technology and we are conducting a cultural fest and i need sponsors for that so i want to...
hey
thoughtworks is cuming to our college at 24 aug.
plz send me programming round questions to my email id