joshje / has-js Goto Github PK

Hi! Thanks for sharing this technique!

Recently I came up with a different technique that can be used in some cases, and thought I’d share it.

In this example, I use the class .js-hidden for elements that should be hidden if the main JavaScript can be run. I hide them as soon as possible by using this CSS:

.js-hidden {
  /* Hide the element for about 5s, then fade it in. */
  animation: js-hidden 6s;
}

@keyframes js-hidden {
  0%, 90% {
    opacity: 0;
  }
}

In the main JavaScript I remove them:

$('.js-hidden').remove() // Using jQuery here for brevity.

Note that this technique requires your .js-hidden elements not to affect layout, or elements will jump around as soon as the .js-hidden elements are removed from the DOM. In my case, that was not a problem because I could absolutely position my .js-hidden elements.

If you can live with the above caveat, and are OK with that the .js-hidden elements might flash in older browsers not supporting animation, I think it is a fine solution.