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 want an element to transition from height: 0 to its natural height when opened. Which single line can make height: auto animatable?

  1. interpolate-size: allow-keywords
  2. transition-behavior: allow-discrete
  3. transition-size: auto
  4. will-change: height

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

View this email in your browser (or share it with a friend!) Hello Reader, I’ve started collecting answers for a Family Feud style game called Asked 100 Devs (more on this at the very end of the email), and one of the questions I asked was “What is your favorite color format in CSS?” I don’t want to spoil the results yet (I’ll be having some contestants on soon to try and guess the top answers to the questions), but something that caught me by surprise was that, of the answers for rgb, 80% of...