CSS can count now!


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!

A rare quiz question with only two possible answers instead of four! If you don’t have a container-type declared anywhere on your page, but an element is using cqi units, what would it be measuring?

  • Nothing. Container query related things require a defined container.
  • The viewport. Unlike @container, container query units fallback to the viewport.

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, As part of my Asked 100 Devs game that I’m doing, I asked developers which CSS property they have to look up the syntax for most often. The video is in the section below, but one thing that I didn’t think of when putting the question together was that people often look a lot of things up 😅. I probably could have phrased the question better, asking about what they look up the most often, but I think it raised an...

View this email in your browser (or share it with a friend!) Hello Reader, A few years ago there was a common scam on YouTube where people would create fake accounts with the same profile picture as creators, but use a WhatsApp number as the name on the account, and then they'd use a bot to mass-reply to people saying to give them a call. It was a big problem, and I would actually get replies to those comments, as well as DMs and emails from people who tried to contact the number. As with...

View this email in your browser (or share it with a friend!) Hello Reader, Sometimes it can be hard to build momentum, and there are more and more things in our way now than ever. Social media has been one of the big ones for a long time now. For me, it can be an issue because it's part of my job. I probably should use some sort of scheduling app, but I tend to just go to Bluesky to post something, and then get distracted reading my feed. One issue I know more people are having is context...