cssfouc

Eliminate flash of unstyled content

How do I stop the flash of unstyled content (FOUC) on a web page?

Solution

  • None of the CSS-only solutions presented here work with modern browsers (asynchronous loading of css and fonts). You have to use Javascript. What I've done to avoid FOUC is:

    <html>
  <body onload="document.body.style.visibility=`visible`;">
    <script>document.body.style.visibility=`hidden`;</script>

    With this approach the body of my web page is kept hidden until the full page and CSS files are loaded. Once everything is loaded, the onload event turns the body visible. So, the web browser remains empty until a point when everything pops up on the screen.

    It is a simple solution but so far it is working.

    This will not affect users who have disabled Javascript because the <script> tag is ignored.