Blog

A case study on how to build a guessing game with the prompt API. My game of Guess Who demonstrates how AI can be used to build thoughtful game logic, and the importance of prompt engineering to get the outcomes you expect.

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.

A little while ago, in Chrome 133, a feature called popover=”hint” landed in the browser. This feature paved the way to something bigger, more specifically, popovers being triggered on hover/focus. This comes with a new attribute “interestfor” and some CSS properties to change the delay speed when showing popovers using that method. There still isn’t much definitive on how this should behave on devices without hover capabilities, and that’s what this article is all about. I want to make sure the content of these popovers is accessible on touch devices.

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”.

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.

As I begin this article on the train back from CSS Day 2025, I find myself physically and mentally exhausted, yet simultaneously, I feel a glow of joy and a sense of accomplishment. This time, I’m not rushing an article about every talk. This time, I'd like to share a story about my experience at CSS Day. This article is not your rushed tech article; it’s your Sunday read, it’s a story about a little man climbing a stage he thought he’d never climb. A truthful, emotional love letter to CSS Day and a reminder that you are allowed to have a bit of fun.

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.