Blog

It’s not secret that I love a bit of beautiful UI. The web is full of creativity, experiences that we start to miss out from when using AI to look up everything. Finding information for a Metal festival and reading it in a sans-serif black/white screen is not engaging, you lose every bit of feeling, the urge to go jump in the mosh pit. I felt I had to at least try to take a look at ChatGPT apps. Is this the way forward? Some thoughts...

For a long time, if you wanted to style the space between items in a grid or flex layout, you had to fake it. Borders on child elements, extra pseudo-elements, background tricks, extra markup, etc. It worked... until it didn't. Responsive changes could break illusions, it always felt hacky, and in a few cases we'd end up polluting the DOM structure for something purely visual (Which I hate doing). An update that is long overdue, CSS is filling those gaps in our grid systems.

Sometimes you have this one of thing you are proud of, but you don't share it with the world. One of those thing is my color scheme that I use for my blog. I also started to use it in my IDE, and now you can too!

About half a year ago I wrote about the idea to have multi-handle range sliders as a native HTML element. I asked for feedback, and the community delivered. The proposal has moved forward since then, but it needs more voices to get browser vendors on board. Here's what happened, what changed, and what you can do. This article shows some of the survey results, and is a big call for help.

After sharing the redesign, a few people asked about the architecture underneath. How is the CSS organized? What's the token system? How does dark mode actually work? I had a few people asking to go more in depth, so I thought I'd show it a bit more about this CSS architecture. Cascade layers, a three-tier design token system, the light-dark() migration, a modern reset, container queries, logical properties everywhere, and the progressive enhancement philosophy tying it all together.

For years, developers have been hacking around the limitations of border-radius, using clip-path, SVG masks, and fragile workarounds just to get anything other than round corners. The new corner-shape property finally changes that, opening the door to beveled, scooped, and squircle corners.

I talk about progressive enhancement a lot. Like, a lot. So when it came time to redesign my own site, I figured it was time to actually practice what I preach. What started as a typography fix turned into a full redesign powered by view transitions, corner-shape, @property, scroll-state queries, anchor positioning, and more. All progressively enhanced. All without a single polyfill.

Scroll-driven animations have been one of my favorite features to land in CSS. Being able to play animation progress to scroll positions opens up so many possibilities. But I always felt that something was missing: sometimes you don't want to scrub through an animation. Sometimes you just want the scroll position to determine when an animation plays, not how it plays, which for me was a far more common pattern in the past. Well, with scroll-triggered animation, this final piece of the puzzle is there. What's more, when you combine the two, it's a match so perfect, even Cupid would be impressed by the timing.

Oh, how I have been waiting to write this title! If you've read a few things by me, you know I'm always a bit hyped when CSS gives us the keys to the state-machine kingdom. For years, we've relied on intersection observers or scroll events in JavaScript to answer simple questions about an element's position and state. We already have a lot of these things happening in browsers, such as scroll-driven animations. But more state information is on the rise with an update on scroll-state queries.