CSS

A single HTML `progress` element can have quite an elaborate design with custom colors, a tooltip showing the active %, and even an entrance animation.

Sacha Greif introducing the State of CSS 2024 results: Let me make a prediction: we’ll look back at 2024 as the turning point between “CSS Classic” and “New CSS”. That feels intuitively true to me, except we won’t use those names. Check out work done on CSS Levels which define CSS4 and CSS5 “eras” (which […]

You can give a name (“custom ident”) to any scrolling element’s “timeline”, have a parent element pick it up, then have any other element use it for their own animation timeline. It’s a trip!

If you give a scroll or view timeline a –custom-ident name, then any descendent can “listen” to that timeline and base @keyframe animations off of it.

A rather exceptional CSS trick discovered by Roman Komarov that uses scroll driven animations to resize lines of text to fit exactly to their container.

If you’re creating a scroll-driven animation and the goal is “when the page is scrolling through this general section, animate the children” it’s probably going to involve passing scrolling data through custom properties.

The other day I needed to quickly see pixel dimensions that were exactly in a 9 / 16 aspect ratio. Like: 180 / 320. That’s perfectly in that ratio. You might be able to think of that one in your head, but how about 351 / 624? That’s harder to think of. And I wanted […]

Victor Ayomipo saw our post about using container units for everything. He was more optimistic than I that our result was good. My thinking is that there are plenty of things you straight up don’t want to use container units for. Victor did a similar exercise with (over?)-using min() and viewport units. Turns out there […]

When you use View Transitions on multiple elements, it can be a very nice look to stagger them out a little bit. It’s possible now, but a bit finicky. Let’s take a look at some code, present and future, that will help.

The ability to style a <select> menu has long been high on list of web designer’s want lists. The inside part anyway; the part that opens up when you activate it. The outside we’ve been able to style for a while. Open UI did a bunch of research and even had a browser implementation of […]