Menu
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.
453
Purpose: The primary purpose of the no-js class is to allow the use of CSS to style JavaScript-free pages, i.e. defining CSS styles for JavaScript-enabled browsers as well as for JavaScript-disabled browsers. Thus, the “no-js” class will only be present if JavaScript has been disabled.
The no-js class is used to style a webpage, dependent on whether the user has JS disabled or enabled in the browser. By default, Modernizr will rewrite <html class="no-js"> to <html class="js"> . This lets hide certain elements that should only be exposed in environments that execute JavaScript.
In JavaScript, you don't! You can write any program you want without utilizing classes or the this keyword ever! Indeed, the class syntax is somewhat new to JavaScript, and object oriented code was written with functions beforehand. The class syntax is just syntactic sugar over that function-based approach to OOP.
The concept of feature detection The idea behind feature detection is that you can run a test to determine whether a feature is supported in the current browser, and then conditionally run code to provide an acceptable experience both in browsers that do support the feature, and browsers that don't.
Paul 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.
151
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.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
