The flash of no-JavaScript styles (FONJS) happens when styles need to be applied to certain elements, but only if JavaScript is enabled. If the JavaScript doesn’t execute fast enough, the user may briefly see the no-JavaScript styles.
An example of where FONJS can occur is a tab interface, which consists of a list of navigation links (tabs) and the content they will activate (tab content). To consider the audience that may have JavaScript turned off or unavailable (for any number of reasons), we want the tab content to be accessible without JavaScript. When JavaScript is available, all tab content should be hidden, except for the active one. Conversely, when it’s not available, all tab content should be visible.
<style>
.js .tab-content {
display: none;
}
</style>
<ul class="tabs">
<li><a href="#tab-content1">Tab 1</a></li>
<li><a href="#tab-content2">Tab 2</a></li>
</ul>
<div class="tab-content" id="tab-content1">
Tab content 1
</div>
<div class="tab-content" id="tab-content2">
Tab content 2
</div>Implementing a solution
Option 1: .js class
This option is based on the idea that a .js class will be added to the <html> element via JavaScript to craft styles that depend on JavaScript. FONJS is frequently observed when a JavaScript library (like jQuery) is used to apply the .js class, and particularly when that library is loaded at the end of the document. For performance reasons, we do want to load external scripts at the end of the document.
We need a fast, library-agnostic way of doing this, that will also maintain any existing classes on the <html> element. To ensure the JavaScript will execute quickly enough, it needs to be embedded in the <head> block.
<script>
document.documentElement.className = document.documentElement.className + ' js';
</script>Note: document.documentElement returns the root element of the document. In the case of an HTML document, this should always return the <html> element.
Option 2: <noscript>
The purer option of the two, and my preference, this solution simply uses a <noscript> element in the <head> block to load an external stylesheet used for no-JavaScript styles.
<noscript>
<link href="/css/no-js.css" rel="stylesheet" />
</noscript>Option ?
As with many things in web development, there are several solutions to this problem. I’ve documented the two approaches that I’m familiar with. If you have a different solution to this problem, please share in the comments area.
Have a comment?