This css property fixes a problem as old as css


​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 important point, that even people who know what they are doing and do this all the time still look things up.

I’m constantly opening up MDN to get the syntax for different properties, or even watching my own videos to remind myself how I did something.

Whenever we watch videos or hear others talking about code, it always seems so effortless, so always remember that if you don’t remember how something works, or if a set of values need commas or not, or the order for something like box-shadow, you’re in the norm 🙂.

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

📺 This CSS property fixes a problem as old as CSS

video preview​

Every element with text in it is slightly taller than the text you can see. There’s empty space above and below all the characters, with that space coming from the font.

text-box-trim and text-box-edge let you cut that space away, so the box actually ends where the letters do.

And if you think you’ll never remember the keywords for it, Temani Afif has created a tool for you.


⚡ What CSS syntax do devs have to always look up? | Front-end Family Feud

video preview​

I asked 100 devs which bit of CSS syntax they always have to look up, then made Michael Warren guess the top answers. Some of them you’ll see coming. At least one you won’t.

📝 Quiz time!

You're fading cards in with a scroll-driven animation, but they fade back out every time you scroll past. You want each card to animate in once and stay. Which of these can help make it possible?

  • animation-direction: normal
  • animation-fill-mode: forwards
  • animation-iteration-count: 1
  • animation-play-state: paused

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

P.S. If reading about text-box-trim made you realize you've been guessing at why CSS does what it does, that's the whole reason CSS Demystified exists.

It doesn't teach you syntax, it helps you build mental models around how it works, so the next weird spacing problem is something you can reason about instead of trying to guess (or prompt) your way to fixing the issue (while also making sure you know about the features that can help solve these problems!).

​Find out more about it here.


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, 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...

View this email in your browser (or share it with a friend!) Hello Reader, The end of the week snuck up on me a little this week, so no ramblings to kick things off this week. 🙋♂️ What I’ve been up to this week 📺 Use these CSS features instead of JavaScript A lot of the little bits of JavaScript are added to projects exist because CSS couldn’t do the job at the time (or we didn’t know that CSS could). Modern CSS can do a lot now, but there are a lot of older features people either forgot...

View this email in your browser (or share it with a friend!) PRE-S: After years of people telling me how amazing an event it is, I’m so thrilled to let you know that I’ll be speaking at Beyond Tellerrand in Düsseldorf in April of 2027. Even though they've just started to announce speakers, tickets look like they are selling fast... just saying 😉 Hello Reader, I wanted to talk about something else this week, but I’ve stuck it in my draft for next week instead, because I think what’s currently...