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.
