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

Staying sane when things get busy

Staying sane when things get...

May 15 · General Musings with Kev...

16:24

I recently went through a period that could have led to burnout, but I managed to avoid it, so I thought I'd share how I managed to get through it.

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!

When using animation-timeline: view() to create a scroll-driven animation, what happens if you don’t specify animation-range?

Animation plays from when the element enters the viewport until it exits
Animation plays only when the element is 50% visible
Animation plays only when the element is fully in the viewport
Animation doesn’t work

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.
600 1st Ave, Ste 330 PMB 92768, Seattle, WA 98104-2246

Hi! I'm Kevin