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.

video preview

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.

video preview

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.

video preview

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

video preview

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

video preview

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

Too many tools

show
We don't always need a new t...
Mar 6 · General Musings with Kev...
13:53
Spotify Logo
 

This week I talk about the challenges of content planning and scheduling, and my preference for simple tools like pen-and-paper calendars over an excess of apps.

LISTEN ON: APPLE | SPOTIFY | YOUTUBE | RSS

🔗 Other awesome stuff from around the web

📝 Quiz time!

A few weeks ago I had a tricky selector question that most people got wrong (only 14% got it correct!). This one's tricky too, but a bit different: Only one of these selectors is valid, which one is it?

  1. :is(> *)
  2. :has(> *)
  3. :not(> *)
  4. :where(> *)

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

Weekly newsletter, where I talk about tangentially-related front-end development topics and share what I've been up to in the last week, plus any cool/fun/interesting/useful links I come across as well.

Read more from Hi! I'm Kevin

View this email in your browser (or share it with a friend!) Hello Reader, If you only have 10 or so minutes of free time for this email, instead of reading it, I’m going to ask that you either read this article or watch this video by Salma Alam-Naylor, where she explores her current thoughts on the tech industry and the impact AI is having on it. I’ve had a lot of thoughts on the current state of things circling around my head without being able to wrangle them in any coherent way, which she...

View this email in your browser (or share it with a friend!) Hello Reader, On Saturday morning, I passed 1 million subscribers on YouTube. I created my channel over 9 years ago. Around 5 months in, I hit 100 subscribers, and at the time, I was blown away that so many people liked my videos enough to bother subscribing. Three years later, I'd passed 100,000 subscribers, which I honestly didn't think was possible for a channel dedicated to vanilla HTML & CSS. And now it's one million. For a...

View this email in your browser (or share it with a friend!) Hello Reader, This week, I’m formatting things a little differently because the comments on a YouTube video I posted got me a little riled up 😅. So, starting with that video, I took a look at Temani Afif’s mind-blowing CSS-only graph theory CodePen. And while most people were pretty blown away by this as well, there were a fair number of comments about how this is breaking the separation of concerns and how CSS shouldn’t be able to...