Latest Articles

You know I’m a little obsessed with :has() in CSS and how useful it is. So I’m chuffed that Ahmad Shadeed made a killer interactive guide with loads of great examples. The basics are so satisfying like “Does this <figure> have a <figcaption>? Yes? OK then style it differently.” And that can be leveled up to the entire page, like “Is the fixed-position footer on the page right now? Yes? Then move that icon in the lower right corner up a bit.” My favorite on this page is: “Are there two buttons? OK center them. Are there three buttons? Split them up with some flush left and some flush right.” Quantity query!

A left-and-right layout is blissfully easy with CSS grid. Something like grid-auto-rows: 1fr; will do it — just put two elements as the children. This is how I like to roll though, making two equal columns that can shrink properly:

.halfs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}Code language: CSS (css)

But Ryan Mulligan found a very interesting way to make it complicated in The Fifty-Fifty Split and Overflow. Let’s say one side needs to naturally grow with the content, but if the other side is longer, then it needs to scroll. I wouldn’t call it intuitive, but it turns out using contain: size; on the scrolling container will do the trick.

Eric Portis did a bang up job explaining color spaces on the web. sRGB is, as Eric puts it “the web’s dominant, default color space”, but he doesn’t spend much time on that. Thanks to recent evolutions in web tech, we have access to a wider gamut of colors (P3) and more color spaces than we’ve had before.

What is a color space? It is a way of modeling colors on a 3D graph this is… made up. They aren’t scientific truths or anything. They are just ideas from smart people that help us do useful things with colors, like interpolate between them for gradients. A color space might take on this responsibility: be able to change one of the values and have the result be predictable and and consistent. That’s what OKLCH does, why I’m hot on it, and I think you should at least know about it.

Jake Archibald has some great examples of awkward gotchas with View Transitions. View Transitions are naturally great at tweening one state of a DOM element to the next, but you’ll see likely-unwanted ghosting if the element changes shape from one state to the next. You can either prevent it from changing shape by changing either the starting or ending state, or in the case that you need the different shapes, grab ahold of the parts and have them move individually how you want them to.

I found it satisfying that the answers weren’t in more new exotic web technologies, but just in understanding and using existing CSS layout better.

Deno is getting in on the package registry business with JSR (“JavaScript Registry”). The name should help people understand it’s not Deno-specific, but instead built to support the ever-growing number of JavaScript runtimes. There isn’t much public information (it’s waitlisted), but David Bushell was able to take it for a spin.