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.

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.

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.

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.

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.

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.

It’s not always the big features that make our everyday lives easier; sometimes, it’s those ease-of-life features that truly enhance our projects. In this article, I want to highlight two such features: @starting-style and transition-behavior — two properties that are absolutely welcome additions to your everyday work with CSS animations.

The year was 2018, and we were still trying to cope with IE11 and had to find some ways for certain effects. Things that we take for granted with CSS nowadays were not possible and one of the solutions to create awesome effects on the web was using SVG Filters. Fast forward to 2025, SVG filters are still awesome, but I use them less. In this article, I wanted to revisit them, with some easy-to-use effects we can use today.

Who publishes an article on the last day of the year? This guy! I felt like I should honor the tradition of at least recapping the past year by writing one final article in 2024. So this time, there will be no tutorials or hidden code gems. I already created my holiday CSS greeting card. This is just a little personal reflection and future plans for 2025.