How does content fit?
Okay, do you know about fit-content? It’s the sibling of min-content and max-content. It can be a bit tricky to wrap your head around at first, but let’s break it down.
Read vibeHi there!
Good Vibes Only is owned by me, Jessica, and I work as a freelance front-end developer. I write about things I’ve experimented with and thoughts I like to share, focusing on creativity and CSS.
I have a love for CSS because it’s what makes the web look interesting and fun!
Things I have written
Newest vibes
Happy 4 year anniversity to me
Today, I'm celebrating a birthday girl, and not just any birthday girl. My company, Good Vibes Only, is now 4 years old! It somehow feels like I just started, yet so much has happened.
Read vibe
Quick and trix
Latest beat
Zero calculations to give
Last week, I learned something new about the calc() function in CSS. Just not sure if it’s a good thing, but a thing it is. Imagine this code and try to find what’s wrong:
.element {
width: calc(12px + ((24 - 12) * 0));
}The issue lies in the zero. You can’t perform calculations with a unitless 0 inside calc(). This is because number tokens are always interpreted as numbers or integers, and a unitless 0 isn’t supported when interpreted as a length. That means width: calc(0 + 12px); is invalid, even though both width: 0; and width: 12px; are valid.
It makes even more sense if you think of it this way: since 5 + 12px has no meaning, we might assume that 0 + 12px simply evaluates to 12px, but for the browser, it doesn’t work that way.
Top of mind
Inspiring me right now
Graphic design of unknown content with unknown collaborators, on an infinite and unknownable canvas, across operating systems, interfaces, languages and writing modes.Miriam Suzanne