JavaScript

An ever-growing cheatsheet for JavaScript. I add things that I think are useful but difficult to unearth or understand.

Contents

  1. Only apply CSS if JavaScript is enabled

Only apply CSS if JavaScript is enabled

Too many websites break entirely if a visitor has JavaScript disabled. I think JavaScript should be opt-in; icing on the cake.

Say you want JavaScript to decide when to turn a div from opacity: 0 to opacity: 1. If the user does not have JavaScript enabled, that div will never be visible. That opacity: 0 should therefore only be set if JavaScript is enabled.

Here’s the cleanest way I think to do that (within my opt-in approach described above):

document.documentElement.className = "js"

That adds the class js to the root html element. Then, in your CSS:

.js div {
    opacity: 0;
}

That div will only ever receive the opacity: 0 if the root html tag has the class js applied to it.

See this Sass tip for how to reference a higher-up parent element within your nesting structure. That’s how I apply these .js styles.

Source