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 swap vi for cqi in your fluid type clamp(), but the text still scales with the browser window instead of the wrapper. Why?

  • cqi isn’t supported inside clamp()
  • cqi only works inside an @container block
  • cqi resolves against the viewport when no ancestor is a container
  • You need container-type: size, not inline-size

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.

And if you'd like to see a cool thing you can do with cqi and registered custom properties, check out this video.

​

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!) 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...

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

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