Eliminate flash of unstyled content

Question

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

Answer 1

A CSS-only solution:

  
    
    ...
  
  
    ...
     
  

As the browser parses through the HTML file:

• The first thing it will do is hide .
• The last thing it will do is load the styles, and then display all the content with styling applied.

The advantage to this over a solution that uses JavaScript is that it will work for users even if they have JavaScript disabled.

Note: you are allowed to put inside of . I do see it as a downside though, because it violates common practice. It would be nice if there was a defer attribute for like there is for