CSS

Let’s try a fresh take on animating focus rings around a page. Flying focus, as it were. Only instead of measuring where elements are ourselves, we’ll let View Transitions figure it out.

:nth-child supports the keyword `of` in the argument which can be super useful on it’s own. Combo that with a :has() selector to do some pretty wild stuff!

If you have any shared styles across multiple shadow DOMs (imagine 20 custom button components), a Constructable Stylesheets is just way more efficient.

A radio button is this: Paul Hebert took at fair look at how Shadcn turns that into 45 lines of code and three imports, which in turn uses Radix which is 215 lines of code and 7 more imports. But do you get better accessibility? No, it’s arguably worse. But do you get ease of […]

This article covers a layout approach that better fits the modern web: fluid, intrinsic components that adapt by default, and treat conditional rules as local, intentional exceptions.

It’s fine. I’m fine. I just like learning ok.

Let’s take a look at what SVG filters are and the basics of how they work.

Keith Cirkel has been building some interesting and educational web games lately:

If we give a `container-name` to the root of all our unique components, we can scope styles to them with a simple @container query.

We can make puzzle pieces in CSS thanks to the amazing clip-path: shape(). Here, Amit takes it further by making a whole grid of them with matched edges and content inside.