TIL CSS has a 'Calculate' Function
CSS will let you add different units together, but you have to use the calc() function
I don't like to specify layouts in pixels, because display sizes are all over the place. I dislike sniffing the display size and adjusting parameters through javascript, because I feel like the document should take care of all of that for me.
Something that has been bothering me is I find myself specifying heights, widths, margin, etc in em, while I typically specify border in px. Maybe this is bad practice, but it's what I've been doing.
The trouble is when trying to figure out how big something is, I can add up the em, and I can add up the pixels, but I didn't know how to combine them.
Today I learned that you can combine them with the calc() function. calc( 10em + 5px );
will spit out the number.
It's only supported in bleeding edge browsers, but it's a nice feature.
The big gotcha is that you must have a space surrounding the mathematical operator, or it won't get parsed.
Happy Calculating!