How to ignore an element’s size (and why you’d want to)


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

Hello Reader,

The summer edition of this newsletter is in full force, meaning it’s much shorter than normal. If you’d like to pause receiving this newsletter until they return to normal (sometime around mid-August), you can click here to update your preferences.

Also, a big thank you to everyone who answered my survey on using em units, and sorry if it was closed when you submitted it, I hit my limits much faster than I'd anticipated!

I'll have some more insights to share next week, but the quick results are that about half of people do use them, and half don't.

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

How to ignore an element’s size (and why you’d want to)

video preview

A little while ago, Jeff Bridgforth asked what seemed like a simple question on Bluesky, which turned into a bit of an interesting adventure as an all-star lineup of CSS experts weighed in, each adding a small twist to the previous person’s solution.

I cover most of it in my video, but if you’d like a breakdown of all the solutions, including the code of each one, make sure to check out Jeff’s blog post where he documented it as well.

📝 Quiz time!

Which of these CSS creates animations based on scroll-position?

  1. animation-timeline: scroll()
  2. animation-trigger: scroll()
  3. scroll-animation: timeline()
  4. timeline: scroll()

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.

🔗 Other awesome stuff around from the web

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)

Conquering Responsive Layout

A free course to help you approach responsive layouts with the right mindset.

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 →

Advanced

Beyond CSS

An advanced course that dives into project architecture, theming, design systems, and more.

Enroll →

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

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!) The State of HTML survey is now opened! Hello Reader, This week, we’re taking a break from the shorter summer versions of the newsletter. We’ll be back to the shorter summer version next week. Last week I asked about whether or not you use em units… and I do apologize for the survey being closed for a lot of you, I hit my limit much faster than I’d anticipated, and probably should have just used a simple Google form for that one…...

View this email in your browser (or share it with a friend!) Hello Reader, 💭 General musings Quick one this week as I’m enjoying some time with my family. 🙋♂️ What I’ve been up to this week :has() is more than a parent selector The :has() selector is the selector that keeps on giving, and in this video I explore some of the creative ways we can use it to select elements that come before other elements, all the siblings of an element, and when an element contains a specific number of children,...

View this email in your browser (or share it with a friend!) Hello Reader, Sometimes when I try out a CSS feature to test something out quickly, it does whatever it promised to do, I’m happy, and I move on to other things, storing it away for when I might need it. Other times, I go down a bit of a rabbit hole, which I did this week when testing something out with anchor positioning. I wanted to test out if I could create a transition when changing what an element was anchored to… and it turns...