Prevent FOUC

gistfile1.html

<!-- Prevent FOUC (flash of unstyled content) - http://johnpolacek.com/2012/10/03/help-prevent-fouc/ -->
<style type="text/css">
    .no-fouc {display: none;}
</style>

<script type="text/javascript">
    document.documentElement.className = 'no-fouc';
    // add to document ready: $('.no-fouc').removeClass('no-fouc');
</script>

Nice! 👍 Thanks.

Woow, simply the best one I've ever tried. My use case is inline critical CSS not fully capture above the fold layout state and would flash upon the main CSS loads. Thank you for this.

This doesn't work for external style sheets, does it? Since ready() doesn't care for them.