No No-JavaScript

I’m big on progressive enhancement but on real world projects, you gotta account for there being no JavaScript available for highly interactive elements.

The ol’ no-js class or in CUBE CSS projects, a data-js="none" exception has been the go-to for years, but utilising a media query like David shares with us is pretty handy.

If you ever wanted a pro tip from me it’s to build front-ends with the attitude of “JavaScript will not be available”, rather than “JavaScript might not be available”. It 100% will not be available for a lot more users than you think, so with a progressive enhancement lens, building for no-JS by default then using the scripting: enabled media query rule seems like a good call.

@media (scripting: enabled) {
  .interactive-component {
    /* All the styles that will apply if JS is available */
  }
}

Advert