How can a site instantly detect that javascript has been disabled?
CSS Solution
See DEMO. Also available as a JS library.
Stop the CSS animation by continuously replacing the element with JavaScript. Once JavaScript is disabled, the CSS animation kicks in and displays a message.
@keyframes Browser compatibility: Chrome, Firefox 5.0+, IE 10+, Opera 12+, Safari 4.0+
<style>.nojs_init { position: relative;animation:nojs-animation 0.2s step-end;-moz-animation:nojs-animation 0.2s step-end; /* Firefox */-webkit-animation:nojs-animation 0.2s step-end; /* Safari and Chrome */-o-animation:nojs-animation 0.2s step-end; /* Opera */}@keyframes nojs-animation{from {visibility:hidden;opacity:0;}to {visibility:visible;opacity:1;}}@-moz-keyframes nojs-animation /* Firefox */{from {visibility:hidden;opacity:0;}to {visibility:visible;opacity:1;}}@-webkit-keyframes nojs-animation /* Safari and Chrome */{from {visibility:hidden;opacity:0;}to {visibility:visible;opacity:1;}}@-o-keyframes nojs-animation /* Opera */{from {visibility:hidden;opacity:0;}to {visibility:visible;opacity:1;}}</style><body><div id="content"></div><div id="nojs" class="nojs_init"><noscript>JavaScript is <span style="font-weight:bold;">disabled</span>.</noscript></div></body><script>document.getElementById("content").innerHTML = 'JavaScript is <span style="font-weight:bold;">enabled</span>. Try disabling JavaScript now.';var elm = document.getElementById("nojs"), animation = false, animationstring = 'animation', keyframeprefix = '', domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), pfx = ''; if( elm.style.animationName ) { animation = true; } if( animation === false ) { for( var i = 0; i < domPrefixes.length; i++ ) { if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) { pfx = domPrefixes[ i ]; animationstring = pfx + 'Animation'; keyframeprefix = '-' + pfx.toLowerCase() + '-'; animation = true; break; } }}// Continuously replace elementfunction jsdetect() { var elm = document.getElementById("nojs"); var newone = elm.cloneNode(true); elm.parentNode.replaceChild(newone, elm);}// Only apply to browsers that support animationif (animation) { elm.innerHTML = 'JavaScript is <span style="font-weight:bold;">disabled</span>.'; setInterval(jsdetect, 0);}</script>
Hrm, I think it depends on the browser. HTML5 supports <noscript> in the HEAD element, so you might try something like this:
<style> .noscriptMessage { display: none; }</style><noscript> <style> .noscriptMessage { display: block } </style></noscript><body> <div class=".noscriptMessage">Foo bar baz</div> ...</body>Spec: http://dev.w3.org/html5/markup/noscript.html
From the spec:
Permitted contents: Zero or more of: one link element, or one meta http-equiv=default-style element, or one meta http-equiv=refresh element, or one style element
Edit: hey peeps, SO does the very same! Just try turning off JS now.
What about javascript code that continuously postpones a http-equiv=refresh (each time replacing the meta element?) As soon as javascript is turned off, the meta element is no longer replaced and the refresh will eventually take place. This is just a thought, I've no idea if meta element insertion is even possible.