My favorite new CSS feature

View this email in your browser (or share it with a friend!)

Hello Reader,

It’s hard to pick one thing because there is so much to pick from right now, but I think my favorite new CSS feature is anchor positioning.

Check out this navigation that I’ve put together for a project I’m working on, where the underline and link highlight is all from a single pseudo-element.

That’s all done with something like 20 lines of CSS!

And, with a handful more, I created a decent fallback for browsers that don’t support it yet, that while not as fancy, I think it does a good enough job as a fallback.

If you’re curious on how I did it, I don’t have a breakdown of this one (yet), but it’s quite similar to what I looked at in this video a little while ago, with the big difference being a couple of delays in the transitions.

And it’s only getting better from here, with Chrome having recently shipped the ability to detect which fallback you are using (if you are using them), so you can make further adjustments, which is great for things like tooltips.

There’s a lot of other great things that are coming as well, but I think anchor positioning is going to be a bit like :has(), gaining a lot of usage quite quickly as it’s support increases, because it’s easy to use (though it definitely has it’s quirks!) and is useful for so many different things.

📺 3 Powerful nesting tricks

Following up from last week’s video where I looked at the basics of nesting, this week I take a look at what we can do when we get a little more creative with how it works.

⚡ Simplified modifier classes with this CSS trick

A quick look at how we can use attribute selectors for modifier classes. This has the potential to clash with other classes, so you do need to be careful with it 🙂.

🎙️ Podcast

Modern CSS quick hits

Some recent insights on what...

Dec 12 · General Musings with Kev...

18:26

In this episode I share some insights from a recent workshop with Smashing, discussing the adoption and support of CSS features like 'has', 'subgrid', and 'container queries', and how I was surprised by the awareness and usage of some features.

LISTEN ON: APPLE | SPOTIFY | YOUTUBE | RSS

🔗 Other awesome stuff from around the web

CSS Wrapped 2025
Make it ugly, for clients
CSS scroll-triggered animations are coming!
And if you’re looking forward to something fun for next week, the CSS is Awesome game is back on December 18th! I won’t be on it again this year, but it looks like an awesome line up, and I’ll definitely be in the chat 😀

📝 Quiz time!

Which of these selectors would select the element that comes directly BEFORE an element with a class of “avatar”?

:before(.avatar)
:has(+ .avatar)
.avatar + .avatar
There is no way to select something that comes before another element with CSS

As per usual, you'll have to head on over to YouTube to take a stab at the quiz, and once you answer, you'll see if you were right or not.

🏁

Have a fantastic week!
Kevin

Are you looking to step up your CSS? I've got both free and premium courses to help with that! They cover a range of skill levels too 👇

Beginner friendly (and free)

HTML & CSS for Absolute Beginners

A free course that starts with the absolute basics, and gets to creating some layouts with Flexbox and Grid.

Enroll →

Intermediate

CSS Demystified

For those who've been writing CSS for a little bit now, but want to step up their game and start writing CSS with confidence!

Enroll →

Intermediate (Frontend Masters)

Build a Modern Site from Scratch

Build a fully responsive site using modern CSS features, along with some polished animations.

Enroll → (25% off first month of Frontend Masters if you use this affiliate link)

If you no longer want to get any emails from me, you can unsubscribe or you can edit your preferences if you'd like pick which emails you get from me.
113 Cherry St #92768, Seattle, WA 98104-2205

Hi! I'm Kevin