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

Howdy—Robin Rendle here.

We’re living through a golden age: CSS was once a language that was easy to make fun of but has now transformed into a serious and expressive toolkit for building visual interfaces. Although making fun of CSS was always lame, today, in 2024, it shows a deep lack of curiosity. The train has left the station. CSS rules. Get with the program.

But this didn’t happen randomly. Thousands of dedicated, smart folks have worked tirelessly over decades to get us to this point where CSS is—in this humble blogger’s opinion—the best design tool ever made. Every day some new super power is unlocked for us in browsers and with each new power the web becomes a better place, thanks to them.

So this blog exists to keep me in the loop and somewhat up to date with everything that’s possible with CSS but also it’s a reminder to celebrate the people doing the hard work building these tools for us.

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:

New magic for animations in CSS

Cool, punk rock stuff coming in hot off the press from Chase McCoy here:

There are two new features coming to CSS that will make it much easier to further avoid JavaScript when implementing animations:

  1. Animating to and from display: none; for the sake of enter/exit animations.
  2. Animating to and from the intrinsic size of an element (such as height: auto;).

Traditionally, animating something into our out of the screen (as opposed to just hiding it visually) required JavaScript to remove the element from the page after waiting for the animation or transition to complete. No longer!

This is a BIG deal. I feel like maybe 50% of my late-night panicked CSS-related searches are about these two topics alone. Perhaps the most eye-opening part of Chase’s blog post though is this bit:

.item {
	@starting-style {
		opacity: 0;
	}

	opacity: 1;
	transition: opacity 0.5s;
}

This @starting-style chap is for when you want an element to be hidden by default but then fade in. And Una Kravets and Joey Arhar wrote about this a while back for the Chrome blog where they have a fantastic demo of a todo list in which each new item added is invisible by default with @starting-style and then expands into view.

I can see myself using these new CSS animations in every project from now until the end of time!