I have always used the method of having a class of .no-js on the <html> tag, then using modernizr that strips the tag and replaces it with js if JavaScript is enabled in the user's browser.
Basically, I have built a CSS3 mobile and desktop navigation. I have styles to change its behaviour if there are CSS transitions etc (checked with modernizr) as well as if there is js or no-js.
The problem is, I get a flash of the no-js version before JavaScript has had time to load and change the class to js. (because the default class is no-js)
What I can't get my head around is how to find a fix for this. If I place js specific code as the main classes, then specify another with the prefix .no-js it flashes the no-js even if js is enabled. If I switch it over, it does the same...
Maybe I am being stupid, but any pointers would be great.
I have always used the method of having a class of .no-js on the <html> tag, then using modernizr that strips the tag and replaces it with js if JavaScript is enabled in the user's browser.
Basically, I have built a CSS3 mobile and desktop navigation. I have styles to change its behaviour if there are CSS transitions etc (checked with modernizr) as well as if there is js or no-js.
The problem is, I get a flash of the no-js version before JavaScript has had time to load and change the class to js. (because the default class is no-js)
What I can't get my head around is how to find a fix for this. If I place js specific code as the main classes, then specify another with the prefix .no-js it flashes the no-js even if js is enabled. If I switch it over, it does the same...
Maybe I am being stupid, but any pointers would be great.
Share Improve this question edited Apr 5, 2013 at 13:41 Anthony Grist 38.3k8 gold badges64 silver badges76 bronze badges asked Apr 5, 2013 at 13:38 ccdaviesccdavies 1,6065 gold badges22 silver badges33 bronze badges 3- Are you delaying the execution of the script until the page has finished loading? If so, don't - you want it to execute before the page finishes rendering. – Anthony Grist Commented Apr 5, 2013 at 13:42
- No, the script is made almost entirely of CSS. There is only one tiny line of jQuery. – ccdavies Commented Apr 5, 2013 at 14:06
- One line is still technically a script. What does that one line look like and where is it located in your page? – Anthony Grist Commented Apr 5, 2013 at 14:07
2 Answers
Reset to default 9Paul Irish has an excellent blog post on dealing with this problem. Here's the solution from that post:
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
...
The key is to make sure you've updated the classnames prior to the browser having a chance to render anything.
You can add a short script at the very top of the <head>:
<script>
document.documentElement.className =
document.documentElement.className.replace('no-js', 'js');
</script>
Also don't forget about the <noscript> tag, which is ignored when JavaScript is enabled.