A lot of new CSS features have shipped in the last years, but actual usage is still low. While there are many different reasons for the slow adoption, I think one of the biggest barriers are our own brains.

It’s honestly quite amazing how little CSS is required to make this happen. Tools like <dialog>, overlay and transition-behavior have taken what was once an incredibly complicated task and reduced it to just a few lines of CSS. Dialogs are easier than they’ve ever been, and as long as we don’t get tempted to over use them, that’s cause for celebration to me.

Here’s the use case: You have a design where the top and/or bottom section of a website has a custom shape defining its transition to the container before and/or after it. Essentially, it’s a shape mask on the top or bottom of the container with the actual content in the section sandwiched in-between.

There are two new features coming to CSS that will make it much easier to further avoid JavaScript when implementing animations: Animating to and from display: none; for the sake of enter/exit animations, and animating to and from the intrinsic size of an element (such as height: auto;).

Let's look at using CSS as an efficient alternative to JavaScript for creating simple timers. We'll use modern CSS properties like @property, @keyframes, and pseudo-elements with counter() values.