Search code examples
javascripthtmlresponsive-designprogressive-enhancement

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

I am working on a site that uses minimal JS, mostly for toggling menus on mobile, that sort of thing.

I would like the site to still be navigable if js is disabled. I've come up with 2 solutions that work, but I would like to know if one is better than the other or if there is something altogether different I should be doing.

Which is better?

Example A

<body>
 <noscript>
  <div class="no-js">
 </noscript>
 ... stuff here ...
 <noscript>
    </div>
</noscript>

or

Example B

<body id="body" class="body no-js">
 ... stuff here ...
<script>document.getElementById("body").classList.remove("no-js");</script>
</body>

Solution

  • 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.