Archive

This weekend is a quick one with just five things to read since I’m still recovering from all the pies and baked goods of Thanksgiving. The brisk and biting cold air has returned to San Francisco and so I’m writing this from a cafe whilst bundled in the biggest sweater you can possibly imagine. It is glorious. I am happy.

Okay, onwards! Let’s get this show on the road.

i.

Josh Comeau’s interactive guide to CSS Grid is so good that it hurts. I simply wish I had a resource like this when I was learning Grid years ago! The demos are especially good in this post and really help parse the somewhat intimidating language of properties like grid-template-columns and what not.

First a quick note, then some excellent feedback from readers.

Then, finally, the future.

i.

This week I spotted a great reminder from Michelle Barker about how CSS nesting is widely available:

Friends!

Last week I rambled out loud about web components and how their true magic lies in extending HTML. Heck, Jeremy even called them “HTML web components” in a blog post which feels like the perfect framing for them.

You might have noticed how I’ve written several hundred words about the subject already and have not once mentioned Shadow DOM, slots, or templates. And that’s because before we get to styling our web components or making anything more complicated we have to sloooowly build up to all that stuff. Otherwise we’re bound to repeat what happened to me when I started learning about the styles of web components before I understood the philosophy behind it all.

Thus ensued a mid-life crisis that I'd rather not talk about.

Friends!

I’m a few days late with this edition so let’s jump straight in.

i.

Sometimes text can look weird and, depending on how many lines and the length of the words in a sentence, the text can look unbalanced. Widows and orphans, etc. Thankfully, there’s two handy tools we have for controlling these things in CSS: text-wrap: balance; and text-wrap: pretty;.

Friends!

This week, two things.

i.

It took me a long time to figure out why color-mix() is so neat and why I’d need it as a developer. But it wasn’t until I spotted this demo on MDN where it made a lot more practical sense to me — mixing a splash of white into a color.

Friends!

This weekend I’ve come down with a bad cough/flu so I’m going to keep typing and then stop when I stop. Apologies in advance if this whole thing is more of a surrealist poem than a typical newsletter. Okay, let’s do this!

(cough)

i.

I’ve got a terrible thing to admit. It’s something unforgivable, something so dark and heinous that I’ve waited years to tell you all out of fear of blackmail or just overwhelming, incomprehensible shame. Here it is, and I’m sorry in advance:

I still use hex values, like #FFF, in my CSS.

I know, I know! I should be using hsla() right? Or...uhhhh...lch()? Wait, no, I got this, I got this. It’s lab()! Or...hwb()? Of course. Duh! I should be using oklab()! That’s the best of the best and the future for color in CSS. I’m 100% confident here. WAIT! I’m supposed to be using color() instead now? But that’s a Safari-only thing, right? Huh? Wah?

Joking aside, I knew that hsla would be faster for tweaking colors than picking a random hex value but, and I note: I am stubborn as hell. Plus, now in 2023, CSS can do so many new and weird things with color that it’s pretty overwhelming and it’s far easier to simply put a hex-colored blanket over my head and pretend that nothing has changed since I started writing CSS back in 2012.

Friends!

Welcome to The Cascade, a newsletter about the past, present, and future of CSS. I’m your host, Robin Rendle, and to kick things off we’re gonna talk about what scares me most about CSS in 2023.

Lots of newish things in CSS mostly are mostly cool and not scary at all. Take nesting for instance, now available in Safari Technology Preview, where soon enough we’ll be able to write CSS like this:

ul {
    padding: 2rem 1rem;

    li {
        margin-bottom: 1rem;
    }
}