Blog Post Articles

There are some real advantages to variable scope and evaluation scope that you get with @function in CSS.

This has been a long time coming, and I could not be more excited it’s finally here. And I know exactly who to thank for it. Our customers have been telling us to do this for a while now: Probably don’t call it Frontend anymore, you have a lot more offerings. The name Frontend Masters […]

Using our 3, 2, 1 state system, we can make popovers animate on “the way in” and “the way out” just like we did with dialogs in Part 1.

Each pseudo element plays a distinct role in how the view transition animates. The browser does most of the heavy lifting though, which makes it a little hard to see what’s actually happening under the hood.

Here’s a brand new approach to creating staggered animations in CSS using a single progress value, allowing for smooth linkage to various inputs like scrolling. By utilizing a mathematical formula, it enhances control over animated elements without isolating their timelines, making animations more versatile and scrubbable.

Using @counter-style for tricky visual effects like word rotation and obfuscation.

@counter-style is useful for replacing the ::marker of lists easily, but it controls any markers-of-counters, so we can use it for more.

You can style the “on the way in” and “on the way out” styles for elements, even when they are moving to/from display: none;. Yay.

There are quite a few “gotchas,” developers face when getting into the new @function syntax of CSS. Some are getting addressed!

There is no `anchor` attribute in HTML, it was decided CSS `anchor-name` / `position-anchor` was the way to go. But modern CSS functions can get us there anyway.