Eliminate flash of unstyled content

Question

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

Answer 1

This is the one that has worked for me and does not require javascript and it works great for pages with many elements and lots of css:

First, add a dedicated

Then, at the end of your last .css stylesheet file, set the visibility and opacity styles to 'visible' and '1', respectively:

html {
    visibility: visible;
    opacity: 1;
}

If you already have an existing style block for the 'html' tag, then move the entire 'html' style to the end of the last .css file and add the 'visibility' and 'opacity' tags as described above.

https://gist.github.com/electrotype/7960ddcc44bc4aea07a35603d1c41cb0