CSS

You can tell a parent element how many children it has with… scroll-driven animations??

The new CSS progress() function calculates a value between 0 and 1, representing its position within a defined range. While awaiting broader browser support, users can manually implement this using other methods.

Text that is set in a left-to-right *and* right-to-left language, mid-sentence, is a thing. Getting it right means understanding it, because your LLM isn’t going to know.

We can animate an element along the border edge of another element to random positions… pretty easily? Might as well be a cute dog.

Kevin Powell is doing game-show-style (specifically Family Feud) shorts where, using data from a survey of 100 devs, he asks another dev what the most popular answers were. Here’s:

It’s not just vibes, it’s an accessibility thing.

A box-shadow is an obvious choice for an inner glow of an element to highlight it. But with some fancy masking, we can use any overlay style we want.

Jake has a very nice, clear video about what text-box solves in CSS. It essentially makes even padding on an element (like a button) doable without magic numbers, and that will work across any font (sick). Temani made a tool to help pick the right values.

It’s an interesting and potentially useful trick to have an element know where it is on a grid. That’s tricky enough when the items are in one row/column, but what about when they span?

The new CSS progress() function maps a given value to a range. Super useful for responsive layouts, responsive typography, and fun tricks.