Why did I not know about this?

(Courtesy of HTML5Rocks)

As it turns out, there is a calc() property of CSS. Wait, property is that the right term ANYWAYS.

It is something that I have wished for on many previous occasions. The ability to mix units. Now, if you want something placed at 10% plus 15px left, you don’t have to do something odd like left:10%; margin-left:15px;, you can just do left:calc(10% + 15px); Quite useful!

Well, okay, you can’t do it quite that easily. It’s an experimental thing, so you have to do some tinkery bits with it. Firefox and the current dev build of Chrome support it, you just need to drop in a -moz- and a -webkit- tag in front.

Inexplicably, IE9 has full support for it without any sort of tag dropped in front. How odd.

Calc() can be used for addition, subtraction, multiplication, and division. +, -, *, and /. I’m looking forward to this.

Leave A Comment


This site uses Akismet to reduce spam. Learn how your comment data is processed.