3 New CSS Features Making Life So Much Easier
These features make things that used to be super hard, now super easy. We will be animating from display none and make an accessible hamburger menu with only 3 lines of code.
... Almost ready!
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.
Ready to learn more?
I think this video might be a good fit for you too!