Issue 136  January 23rd 2026

Custom Radio Buttons & Checkboxes

Customizing radio buttons and checkboxes is still tricky. Coding agents can write both vanilla CSS and Tailwind, but these still often need to be tweaked by a human with eyes and some common sense.

You don't need to get complicated. We don't need frameworks on frameworks on frameworks until we get into the craziness described in The Incredible Overcomplexity of the Shadcn Radio Button.

The Incredible Overcomplexity of the Shadcn Radio Button

I totally understand why people reach for component libraries like Shadcn and I don't blame them at all. But I wish these component libraries would keep things simple and reuse the built-in browser elements where possible.

To understand how our radio buttons work I need to understand two separate component libraries and hundreds of lines of React.

Algorithmic hover states with contrast-color()

Firefox 146 added support for contrast-color() joining Safari 26 in the First Implementor’s Club. For those unfamiliar, contrast-color(<color>) is a new CSS function that will take a <color> as input and returns either white or black depending on which has the most contrast.

The quintessential example is choosing a foreground text color with the best contrast.

Accessible faux-nested interactive controls

A really common user interface pattern is a big clickable area, such as a card. Sometimes you need controls within that card that are also clickable. There's lots of ways to do it wrong, but fret not, Eric is here to show you how to do it right.

CSS Houdini

CSS Houdini is a set of APIs that expose parts of the CSS engine, enabling developers to create CSS extensions. These extensions might polyfill features that are not yet available in browsers, experiment with new layout techniques, or add creative borders and other effects.

How to @scope CSS Now That It’s Baseline

Firefox 146 now supports @scope in CSS, joining Chrome and Safari, meaning that it’s now supported in all major web browsers, earning it the “Baseline: Newly Available” tag.

This @scope at-rule defines a new scope context in CSS. The :scope pseudo-class represents the root of said context (otherwise known as the ‘scope root’), and all this means is that we have some new and exciting ways of writing and organizing CSS, so today I’ll demonstrate the different ways of using @scope and the benefits of each one.

Toggle `position: sticky` to `position: fixed` on Scroll

It’s quite an unusual look when you see an element glide along it’s parent element as position: fixed;, the slide right on out of it, as if the positoning of it somehow magically changes at just the right moment, to position: sticky;. This is exactly what we’re going to pull of here with the help of scroll-driven animation and scroll state queries.

Popover Context Menus with Anchor Positioning

Tooltips are the classic use case for anchor positioning in CSS. You click a thing, and right next to it another thing opens up. That other thing could also be a menu.

The positioning of that menu happens via the magic of anchor positioning. Lemme show you all the HTML first, as that is interesting in it’s own right.

CSS Scroll-Triggered Animations are coming to Chrome

We have Scroll-Driven Animations. Now say hi to Scroll-Triggered Animations. Scroll-Triggered Animations with nothing but CSS are coming to Chrome (and all other Chromium-based browsers) early next year.

Lowering the specificity of multiple rules at once

You probably already knew that you can use :where() to lower the specificity of a single selector, but did you know that you can achieve a similar effect on multiple rules at once?

Making a Victorian CSS Border: Dual-Motif

In the previous tutorial, we learned how to make an 1800s-style CSS border with a single-motif repeating element:

Now, you will learn 3 ways to create horizontal lines with repeating Victorian motifs, where the repeating elements are not identical.

When will CSS Grid Lanes arrive? How long until we can use it?

Currently, the finalized syntax for Grid Lanes is available in Safari Technology Preview. Edge, Chrome and Firefox have all made significant progress on their implementations, so it’s going to arrive sooner than you think.