Articles in "css"

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

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)

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

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!

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

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

An end-of-year reflection on 13 conference talks, book recommendations, struggles with AI noise, unfinished projects, personal growth, and a quick look at the exciting new CSS corner-shape property.

Read more about CSS corner-shape, books, talks, and happy holidays

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)

People often ask me about Tailwind. I think Tailwind is great, but it isn't for me. This article is about the good stuff about Tailwind, the things you might be missing out on, and why modern CSS might be a better choice for pushing the web forward.

Read more about Why Tailwind is great, why you might be missing out, and why it isn't for me

It's the end of November, holidays are getting closer, and I thought, why not make a list? In this article, I want to highlight a few CSS debugging features I'd love to see in Chrome DevTools in the upcoming year, some of which are new and others that are long overdue.

Read more about 5 CSS debugging features I want to see in Chrome DevTools - Holidays list

We need to talk about multi-handle range sliders… Really, we do. They’re one of those UI elements we see on a variety of web shops indicating price ranges; we see them for selecting time-slots; we see them for filtering between a variety of lenght units. Creating these experiences is more often inaccessible than just working, and even when I found the so-called perfect library, I’d still run into limitations for styling and expanding upon it. I thought that I should do something about this. I might be way over my head, and that is why I need your help...

Read more about A native way of having more than one thumb on a range slider in HTML

If I were to divide CSS evolutions into categories, then last year was probably the year that ended with animations and colors getting better; This year, the end of the year seems to be about those ease-of-life features. We had one of those not that long go with :has(), but with things such as sibling-count, sibling-index, functions, and conditionals, the way we write CSS might just change for the better once again. In this article, I want to dip my toe in sibling-index() and sibling-count(), while also carefully adding some functions in the mix.

Read more about Styling siblings with CSS has never been easier. Experimenting with sibling-count and sibling-index

In this part of my customizable select series, I want to highlight option groups! Option groups are part of our select interactions to provide clarity, and now, they can be styled. This will certainly not be the last demo I did on the select, and more updates are coming to this element. With a wink to the past, we will be creating a restaurant dish picker, a true “Select Menu”.

Read more about The customizable select - Part five: Optgroup, creating a true select menu

In this (long) part of the customizable select series, it’s all about gamification. In this article, I’d like to highlight one of my demos, where I aimed to recreate a piece of UI found in the Monster Hunter games. To re-create this behavior, I had to think in terms of keyboard navigation first. This demo requires quite a lot of CSS, as well as some scripting, and in the end, I do want to highlight some accessibility concerns. This is an experiment on how far we can take it when styling select elements.

Read more about The customizable select - Part four: Scroll snapping, state queries, monster hunter, and gamification

In this third episode of my exploration of the customizable select, I thought it was time to show how we can have a little bit of fun with an old friend: sticky positioning. In this article, we’ll be following up on earlier techniques while exploring how we can use the :checked pseudo-class to create a fun open and close effect. We’ll be messing with top-layer functionality, interpolate-size and other trickery to create an emoji picker.

Read more about The customizable select - Part three: Sticky Options

Sometimes you get inspired by a presentation or an article you’ve read. For me, an inspiration started at CSS Day last year during the opening keynote by Mathias Ott. One of those side projects I kept placing at the bottom of the pile, until I finally had had enough of it. I had to make it. In this article, I’d like to present a little tool, an OKLCH color picker. A tool created by me using CSS, a bit of React and a bit of AI help.

Read more about Oklchroma: an OKLCH color pattern generator that generates CSS variables

In this second part of my customizable select series, I’d like to highlight one feature from Interop 2025 that works beautifully with this feature: anchor positioning. This article contains one of my first demos ever created when styling the select and has evolved with every new syntax and iteration across the months / years. We'll also be taking a glimpse at a few experimental features, but the basis of this can be used today. Let’s take a look at my potion selector with CSS.

Read more about The customizable select - Part two: Potions, anchoring, and radial shenanigans in CSS

It’s been a few years since the Interop initiative was set in play. This has historically been one of the key elements in moving the web forward as it aims for a consistent web between browser vendors. In contrast to the “old days browser wars”, we as developers get streamlined features without having to check everything in every browser. The features of Interop 2025 are now known, features to be made stable across browsers by the end of the year. In this article, we’ll take a look at what we should get acquainted with in 2025.

Read more about Interop 2025 - Which browser features to get acquainted with this year and why you should care (iO tech_hub)

The customizable select has entered Chrome 134, allowing us to style this form element to our hearts' content. I decided to write a series about this feature because there are so many cool things we can do with CSS these days to create some really unique and fun experiences. In this first article of the series, I want to talk a bit about the history, while also giving an in-depth guide on how you can start creating your first customizable select as a progressive enhancement, today.

Read more about The customizable select - Part one: history, trickery, and styling the select with CSS

It’s Valentine's Day! As usual, I want to write about something I love, and this time it’s still highly experimental but something I am extremely excited about. Something new is on the horizon named CSS scroll-markers and it allows you to create a fully functional slider without the need of any JavaScript. Don’t believe me? Let’s take a look, shall we? Here is my first impression of creating a carousel with only CSS and some accessibility concerns as well.

Read more about Love at first slide! Creating a carousel purely out of CSS