Zmiana styli CSS gdy JavaScript jest włączony lub nie w samym CSS

Gdy mamy layout i chcemy, aby pojawił się baner informujący, że aplikacja wymaga JavaScript’u, najczęstszym rozwiązaniem jest dodanie klasy do taga html np. no-js i usunięcie jej w JavaScripcie.

Jest jednak sposób, aby to zrobić, w samym CSS.

Oto bardzo sprytne rozwiązanie, którego autorem jest Stas Lashmanov:

<style>
  .js-only {
    display: var(--no-js-hide, block);
  }
</style>

<noscript>
  <style>
    :root {
      --no-js-hide: none;
    }
  </style>
</noscript>

Rozwiązanie nie zadziała jednak w przeglądarce Internet Explorer, która nie wspiera zmiennych CSS.