What Is the Purpose of the HTML "No-Js" Class

What is the purpose of the HTML no-js class?

When Modernizr runs, it removes the "no-js" class and replaces it with "js". This is a way to apply different CSS rules depending on whether or not Javascript support is enabled.

See Modernizer's source code.

Using .no-js class for detection of js

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.

Why should I use noscript?

Well, why should you? If you have no use for it, then just don't use it.

The noscript tag is often used for fallback in advertisments and visitor tracking. If the user has Javascript disabled, a plain image is loaded instead of running the script.

JavaScript - Replacing no-js class with js class not working?

replace returns the new string, it doesn't modify the original.

Try html.className = 'js', since you've already established that it's the only class name with your if statement.

EDIT: Also, the <html> tag is already available as document.documentElement.

document.documentElement.className = 'js';

That's all you need, really. No if statement, no variable, nothing.

What is the best way to add or remove a class for progressive enhancement?

Example A is invalid HTML.

HTML must be arranged in a strict hierarchy.

An element (e.g. your <div>) cannot start as a child of an element (e.g. your <noscript>) without also having the matching end tag inside the same <noscript>).

With option A eliminated, only option B remains.

What Is the Purpose of the HTML "No-Js" Class