It's amazing to witness the speed at which CSS keeps evolving. While the past decade has been all about building a solid foundation for layout (Flexbox, Grid) and syntax (variables) the future promises to be about going much further than most of us ever dreamed of.

When we apply contain to an element we’re isolating it (and it’s descendents) from the rest of the page, and this isolation what opens those possibilities. There are different types of containment which all do different things, and we’ll be getting into each of them.

Now, I could do what I usually do and write some long winded junk about what a spoiler is, how it’s essentially a glorified disclosure widget… maybe mention something about the details and summary elements and how they likely wouldn’t be sufficient for all use cases. Blah blah blah. Boring. Instead, I’m just going to tell you what I’d expect from a spoiler component if someone were to build one, or if one were to ever be standardized.

In 2024, browsers have implemented align-content for flow layout. This has some advantages: You do not need flexbox or grid, just 1 CSS property for alignment. Therefore, the content doesn’t need to be wrapped in a div. It’s amazing that CSS finally has a single property to control vertical align after decades of progress!

This is one of those cases where circumstances at my job led to needing to document expected behavior in order to create “synthetic” links via JavaScript. Sometimes this sort of thing is regrettably unavoidable. A large part of the effort was capturing all the different action you can perform with keyboard interaction when an anchor element is focused. Turns out, there’s a lot!