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 … Read more
Put the <noscript> content at the end of your HTML, and then use CSS to position it at the top of the browser window. Google will no longer consider it important. Stack Overflow itself uses this technique – do a View Source on this page and you’ll see a “works best with JavaScript” warning near … Read more
It’s better to have the default be non-javascript, and then let a javascript code overwrite with a javascript enabled page. Doesn’t have to be much. Can just be a display:none; block, which is then set to display:block; by javascript, and vice versa for the non-js page.
Easiest way I can think of: <html> <head> <noscript><style> .jsonly { display: none } </style></noscript> </head> <body> <p class=”jsonly”>You are a JavaScript User!</p> </body> </html> No document.write, no scripts, pure CSS.
I did some searching through their code and found this snippet (I’ve cleaned it up to make it more readable): var DepLoader = (function () { function init() { var dependencies = document.getElementById(“inline-deps”); if (!dependencies || JS.hasClass(document.body, “deps–loaded”)) { webfontsReady(); } else { var html = dependencies.innerText || dependencies.textContent; JS.addClass(document.body, “deps–loaded”); processRaw(html); } } function … Read more