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
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>yo its just backwards.
on your page in the head do this
<style>
html{visibility: visible;opacity:1;}
</style>
and for the last .css file do this
/* no fouc */
html {
visibility: hidden;
opacity: 0;
transition: all 2s ease-in-out;
}
Fix for FOUC that does not require javascript:
At the top of your HTML:
<!doctype html>
<html>
<head>
<style>html{visibility: hidden;opacity:0;}</style>
At the end of your last .css file:
html {
visibility: visible;
opacity: 1; }
https://gist.github.com/electrotype/7960ddcc44bc4aea07a35603d1c41cb0