My "new" favorite CSS trick


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 switching with the rise of LLMs and AI tools.

The promise has always been that these will help us be more productive, but that promise often simply leads to more context switching than ever before.

Between prompting something while also writing some code yourself, if not running multiple agents at the same time, you end up jumping all over the place, and context switching is one of the worst things we can do when it comes to actually getting things done.

Jason Lengstorf has a great post on this (not the AI part, just the idea that multitasking is a terrible idea) that does caveat that there are exceptions for some people

The real trouble is that it's so hard to tell, because multitasking often makes us feel more productive, but feeling productive and being productive don't always go hand in hand.

The days where I finish a day and feel like I got a lot done? They're the ones where I just sat down and did the thing(s) I needed to do, not the sidequests that kept popping up as I went.

I know this really depends on the type of work you do, but batching can really help because it allows us to stay on a single type of task for a long period, but then of course they make productivity tools for batching that just end up being one more place to check, with their own notifications and other distractions... in other words it fixes one thing, while potentially adding a few new ones into the mix 😅.

All of this is to say that I generally think any sort of productivity hack or solution is often just a sidequest. It's become such a big industry, but if all of these tools and solutions worked as well as they promise, then there would be no need for new ones.

And I'm writing all this because my last week was incredibly busy, but also incredibly unproductive now that I'm sitting at the end of it and looking at what I've actually accomplished!

Anyway, onto the CSS trick I promised in the subject line.

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

📺 My new favourite CSS trick

video preview

It’s always fun when you come across something new, only to realize that others have been using it for over five years, which is the case here where I looked at how we can create a conditional border radius depending on if an element is touching the edge of the viewport or its parent.

I did go slightly more of a modern approach than Ahmad did in his post from 2021, using 1e5 to create a big number, and also using container query units, and as a commenter pointed out, I could have gone even more modern by using sign()!

Some people have asked why I didn't use infinity. It is a valid number in CSS (so it -infinity), but for some reason it doesn't work here. I'm digging into why that is.

But for now, if you need bulletproof browser support you could use 9999, if you don't mind using something a bit more modern, you can use an exponent like I did, which has decent support, and if you're okay with a bit more cutting edge, then you can use sign().


⚡ What framework do developers like the most?

video preview

The first proper Family Feud round is out, with Adam Argyle as my first guest, where he tries to guess what people’s favourite framework is.


🏠 Design Systems House

video preview

I was a guest on Donnie D'Amato's show Design Systems House, where we talked about teaching, CSS, and more.

📝 Quiz time!

You have a block element with padding on it. It has a width: 100%, and margin: 1rem as well. It's currently overflowing its parent element. You add box-sizing: border-box but it is still overflowing. Why?

  1. box-sizing only applies to elements with a declared height
  2. margin is added outside the border box, so it isn’t included in the 100%
  3. There is padding on the parent, which is included in the 100% of the child
  4. width: 100% resolves against the viewport, not the parent

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

View this email in your browser (or share it with a friend!) Hello Reader, Trying something a little different this week with some quick hits before we dive into the main content. The 2026 edition of the State of Dev’s survey is now open. As with all of the State of surveys (or well, any survery for that matter), the more people who take it, the more representative it is. As I let you know earlier this week, I’ll be speaking at ZurichJS in September. If you are in the area and can’t make it,...

Hello Reader, An off-schedule email this week, as I completely forgot to send my regular newsletter on Sunday, and I had wanted to share something that's time-sensitive. I've mentioned this a few times now, but I'll be speaking at Zurich JS Conf on September 11th (along with others like Scott Tolinski, Daniel Roe, Tajas Kumar, and many others), and the ticket price is going up in 3 days. I'll be having some fun talking about how we can now use CSS for a lot of things we'd traditionally used...