profile

Hi! I'm Kevin

CSS can count now!

Published about 2 months ago • 3 min read

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

Hello Reader,

Monday edition of the newsletter this week, as just got back from ZurichJS last night. It was a wonderful conference in a beautiful city, and it was so nice meeting so many people. A big thank you to everyone who stopped me to say hi!

I had batched a bit of content before I left, so below is what I was up to this week and the quiz, but I don’t have any links to share this time around.

🙋‍♂️ What I’ve been up to this week

📺 CSS can count now!

video preview​

If you’ve ever built a staggered animation, you know that it can be a little annoying, but sibling-index() and sibling-count() make it so easy!

There’s a quick colour example in the middle too, where the index drives a hue rather than a delay, and then I take a look at a z-index use case as well.

⚡ :invalid sorta sucks… but there’s an alternative now

video preview​

:invalid starts matching the moment the page loads, which means an empty required field goes red before anyone has typed anything. :user-invalid waits until the person has actually interacted with it, which is what you wanted in the first place.

📝 Quiz time!

Your

content animates open with a height transition, but snaps shut instantly. What’s missing?

  • Add overflow: hidden to ::details-content so it clips while shrinking
  • Set display: block on details so its height can be animated
  • Transition content-visibility with transition-behavior: allow-discrete
  • Use @starting-style so the closing state has a defined start

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

Helping people fall in love with CSS

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!) PRE-S: You can help shape the future of the web by ranking the Interop 2027 proposals. There are a lot of them, but they’re just asking you to pick the ones that are important to you, and rank the ones you’ve picked. I’ll probably be sharing my ranks next week. Hello Reader, So it turns out that Opus 5.5 is very good at decompiling things. This has led to some mostly silly things, like Minecraft in Elden Ring and Mario in Halo, but...

12 days ago • 5 min read

View this email in your browser (or share it with a friend!) Hello Reader, I’ve been seeing questions like this one more and more often these days. I have a lot of thoughts on this that I’m trying to put together for something bigger, but these are the main reasons I keep making CSS tutorials: First, the obvious one: I like CSS! And I like to show what’s possible, and show that it can be fun and rewarding The second point, specifically showing what’s possible, I think is the important part....

19 days ago • 4 min read

View this email in your browser (or share it with a friend!) Hello Reader, Over the last couple of weeks, I’ve been surprised by how many comments I’ve gotten on YouTube asking how to decide when it’s safe to use a CSS feature, and how to handle browsers that don’t support it. So, a quick rundown on my thought process: Is it a progressive enhancement? Something like interpolate-size: allow-keywords is a great example of a time I’ll say yes. Does it really matter if something doesn’t...

25 days ago • 5 min read