3 New CSS Features Making Life So Much Easier

Back in the days, we had to wait years for new CSS features to become available in all browsers. Lately, it feels like we get new features every month.And the good thing is, all features we’ll be discussing are already available in all browsers today 🤯.

In this tutorial we will be taking a look at the following new CSS features.

Popover

The CSS Popover API is a new CSS API that enables us to display content on top of other content. This is great for things like tooltips, but also, for example a hamburger navigation. The latter is what we will be building in this tutorial!

And the good thing is, it’s super easy to use. We only need 3 HTML attributes to make a fully accessible hamburger menu. No JavaScript needed!

Together we’ll be taking a look at popover, popoverTarget and new CSS pseudo-selectors like :popover-open and ::backdrop.

Starting Style

While we’re working on this beautiful hamburger navigation, we will also be adding @starting-style to the mix. This new CSS property is used to add a “from style” when an element gets added to the document.

Meaning that if an element is switched from display: none; to display: block;, the styles in @starting-style will be applied first, and thus will be animated.

This might sound a little bit vague, but when combining that with the next CSS feature, this enables us to suddenly animate from display: none; to display: block; while doing, for example a fade-in animation. Something that wasn’t possible before without some hacky solutions!

Allow Discrete

The last feature we’ll be discussing is transition-behavior: allow-discrete;.

This new feature allows us to animate discrete CSS properties: CSS properties that can only have a limited set of values. For example, display can be none or block, and visibility can only be hidden or visible. These properties have no ‘in-between’ values, so we can’t animate them.

With allow-discrete that is now going to change. This new transition behavior tells your browser to run the animation, and only switch the discrete property at the end of the animation (or the start if you’re animating from display none for example).

Watch the Tutorial

Watch the full tutorial to see how we combine these 3 new properties to make a beautiful and accessible hamburger animation.