CSS + Math = Almost here with calc()

One thing I just can’t wait for is the emergence of using simple math inside of CSS without needing to use jQuery or LESS/SCSS. No Surprise, Internet Explorer is the big holdup. Luckily, IE9 supports calc(), so I think I am only one version away from being able to implement is as a regular inclusion. Google has started to push the trend of only supporting the current and last version of any browser, and I know there’s a ton of people pushing for the same.

Using something like

div {width: calc(100% - 25px;)}

would just be nice to have.  Sure, it’s a simple subtraction kinda deal that could easily be gotten around with margin/padding/etc… but the sweetness is being able to do a other things like multipliers and dividers.

A simple, Flexible, column setup for non-uniform sizes?

one {width: calc(100% / 2;)}
two {width: calc(100% / 3;)}
three {width: calc(100% / 4;)}
four {width: calc(100% / 5;)}
five {width: calc(100% / 6;)}

You can just let the browser do the math for you (it will figure out it’s own preference on sub-pixel divisions).

Of course, browser prefixes will be needed for some time to come, but that’s true of anything interesting.