CSS

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

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.

Aaron T. Grogg has a nice page chock full of examples of UI, which used to be the sort of thing that we’d use JavaScript for, but can now be done in HTML & CSS. No hate: I have nothing against JS, but it has better things to do The examples are very modern, like […]

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.

Personally, I wouldn’t blame you if you were asked what CSS needs these days and you were like uhm, I think it’s good, actually. These days CSS probably has more in it than you even know about or have tried, making it feel not particularly lacking. But if you really dig into the specifics, you’ll […]

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!