Site Preferences

This website stores the browser data needed to provide a better experience and to analyze how the site is used. We do not use marketing tools, only Google Analytics to better understand our audience.

Skip to content

Blog

Under the hood: a closer look at the CSS architecture behind the redesign

A stylized icon representing CSS file architecture with a V3.0 badge, on a vibrant purple and pink gradient background

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.

Read more about Under the hood: a closer look at the CSS architecture behind the redesign

Beyond border-radius: What The CSS corner-shape Property Unlocks For Everyday UI

Smashing Magazine logo

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.

Read more about Beyond border-radius: What The CSS corner-shape Property Unlocks For Everyday UI (Smashing Magazine)

Putting my money where my mouth is: a redesign built on progressive enhancement

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.

Read more about Putting my money where my mouth is: a redesign built on progressive enhancement

CSS Animation Triggers: Playing animations on scroll without scrubbing. It's a match!

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.

Read more about CSS Animation Triggers: Playing animations on scroll without scrubbing. It's a match!

Is it scrolled? Is it not? Let's find out with CSS @container scroll-state() queries

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.

Read more about Is it scrolled? Is it not? Let's find out with CSS @container scroll-state() queries

An update on customizable selects: the multiple select

A few weeks ago, I didn't think I'd start the year with another demo on customizable select. To be honest, I was hoping to let it go for a little while. But there is an update on the rise that needs to be talked about: The multiple select. This little attribute could change a lot of things in making multiple selections; it could turn a series of checkboxes into one element, and it could improve accessibility. This is still in development, but we can take a peek in Chrome Canary.

Read more about An update on customizable selects: the multiple select

State, Logic, And Native Power: CSS Wrapped 2025

Smashing Magazine

CSS Wrapped 2025 is out! We're entering a world where CSS can increasingly handle logic, state, and complex interactions once reserved for JavaScript. It's no longer just about styling documents, but about crafting dynamic, ergonomic, and robust applications with a native toolkit more powerful than ever. Here's an unpacking of the highlights and how they connect to the broader evolution of modern CSS.

Read more about State, Logic, And Native Power: CSS Wrapped 2025 (Smashing Magazine)