How to stop flash of unstyled content

Question

This is just a short question, I don't really have an example but the I am using a bespoke cms and at present we have no access to the head of the web page so some css has to be placed outside the head causing a flash of un-styled content on page load.

Just wondering if anyone on her knows a quick fix with jquery or something to stop this.

I know putting CSS thats not in-inline is bad practise but I was wondering if there is a work round.

Any help appreciated

Answer 1

The basic solution to handle FOUC is to keep it hidden until it has been properly styled.

I assume that you have control over the content that is displayed unstyled? In that case, wrap it in a <div id="some-div" style="display:none">... content ... </div>. Then use jQuery to show it when the entire document is ready:

$(function() { $("#some-div").show(); });

Answer 2

Add a class to the content named no-fouc, set the class to display: none in the common CSS file, then remove the class on page load. The advantage of this solution is that it handles an arbitrary number of elements and can be reused on all pages.

$(function() {
  $('.no-fouc').removeClass('no-fouc');
  $('#dialog').dialog();
});

.no-fouc {
  display: none;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="no-fouc">
  <div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
  </div>
</div>