The browser makes boxes you didn't ask for
Hello my front-end friend,
Last week, I said most CSS problems come from a layer underneath the properties themselves. Here's one piece of that layer that almost nobody talks about.
The browser creates boxes you never told it to.
Take a simple <button class="button">Click me</button>
There's one element there. But sometimes, there are two boxes...
For example, if I did this:
With only text inside that button, you might think the flex on there isn't doing anything, but that text is now wrapped in an anonymous box.
That's why if the button had a height, I could use align-items: center and it would work. The text becomes a flex item, even though it's not wrapped in another element.
And the gap has nothing to space out, so this means our button looks like it did before.
Add an icon, though, and now there are two flex items, so the gap kicks in.
A lot of people handle a button with an icon is a modifier, like .button--with-icon, or a new prop on a component that has some conditional CSS. It works, but every new situation needs another variation, and before long you have a pile of modifiers, or a bunch of conditionals, and things get complicated.
Knowing about the anonymous box means one rule handles both cases, and you don't have to remember anything.
That's the real payoff of understanding the layer underneath. It isn't just that you can fix things when they break. It's that you can write CSS that doesn't break in the first place, even when the content changes in ways you didn't plan for.
And knowing things like this, opens up more than just simple tricks, but it lets you start approaching writing CSS in much more robust ways, but more on that next week.
🙋♂️ What I’ve been up to this week
📺 Stop using min-width in your media queries
Media queries have always been a little awkward. min-width for “this wide and up”, max-width for the other way, and odd values like 767.98px to stop fractional widths slipping through when you need ranges.
We have a better way to write things now, thanks to the range syntax, which has hit baseline widely available.
🎙️ The easy way to learn nothing
A lot of studies are coming out showing the negative impact of AI on learning, yet others show students with an AI tutor learning twice as much. This week on General Musings I dig into the research, what separates those results, and why the struggle is the part of learning you can’t skip.
👉 Worth a look
No sponsor this week, so in case you missed it, I have two courses over on Master.dev (formerly Frontend Masters).
Modern CSS Fundamentals: typography, the box model, Grid, Flexbox, and responsive layouts with container queries and clamp(). About 10 hours.
Build a Modern Website from Scratch is the next step up from that one, a full responsive site from a Figma design, with custom properties, cascade layers, view transitions and scroll-driven animations. About 9 hours.
One subscription covers both, plus the rest of their catalogue of 300+ courses, and either link gets you 25% off your first month. (Affiliate links, so I get a cut if you sign up).
🔗 Other awesome stuff from around the web
A little while ago, I talked about how DigitalOcean had killed CSS-Tricks for a second time, and I was pretty bummed about it.
At the time I heard some rumblings that things were going on and it might come back, but I left like after being burned twice, I didn’t really know if I wanted to support them in a return, though I did settle on wanting to support Geoff (the editor) and all the high-quality writers they always have there.
Well, it turns out I don’t have to worry about supporting Digital Ocean either because CSS-Tricks has a new owner!
And not only is that great news, but it would seem Geoff’s energy, and the plans he has for CSS-Tricks, have also reinvigorated Andy Bell to ramp things back up over at Piccalilli as well.
Normally I have more links to put here, but we’re in a really strange time right now, and I just want to say that if you know any educators in our space (or another space!) that you appreciate, let them know. Don’t hit reply to this email to tell me. Take a minute or two to find someone else, and let them know, because it will make a bigger impact on them than you can imagine.
📝 Quiz time!
--brand is set to an oklch() color. Which color space does alpha(from var(--brand) / 50%) resolve in?
- Always sRGB, since that’s what the web defaults to
- HSL, because alpha() is built on hsl()
- The same space as –brand, so oklch
- You have to add an
inkeyword, or the declaration is invalid
As 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.
🏁 </newsletter>
If that display: inline flex in the intro looked strange to you, it was using the two value syntax for the display value, which allows us to set the inner and outer values. If you've never seen this before, I covered it in a video six years ago (!), and at this point it has fantastic browser support.
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.
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!
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)
600 1st Ave, Ste 330 PMB 92768, Seattle, WA 98104-2246
