Skip to main content

The Cascade is a blog about the past, present, and future of CSS.

Howdy—Robin Rendle here.

This blog keeps me in the loop with everything that’s possible with CSS lately but it’s also a reminder to celebrate the people doing the hard work building stuff for the web.

You can subscribe to The Cascade via RSS, shoot me an email if you absolutely must, or follow the feed. This project is directly supported by readers and the membership program.

Right now the newsletter is taking a bit of a break whilst I figure out a healthy publishing cadence, but you can subscribe below:

Tagged with

Detect JavaScript Support

Ryan Mulligan on the new-to-me scripting CSS media feature:

With this feature, we can provide alternative CSS rules depending on whether or not JavaScript is available in the user's browser. It can also help reduce flashes of unstyled content or undesirable layout shifts.

This is super neat, so you can now write a media query and ask the browser if JavaScript is on:

@media (scripting: enabled) {
	.my-element {
		/* enhanced styles if JS is available */
	}
}

...or disabled:

@media (scripting: none) {
	.my-element {
		/* fallback styles when JS is not supported */
	}
}

Ryan has a great demo of when you want to do that, how to combine queries together for some powerful styling possibilities, and some issues that might pop up when browser extensions are installed.