Can someone help explain how the css3 calc() method actually works?

Question

http://www.w3.org/TR/css3-values/#calc

I have been working on a library that converts some css3 methods into css2. One tricky part is math.. The proposal of css3's calc() method pretty much blew my mind..

I am able to add/subtract/divide/multiply pixels from ems or any other fixed unit, but I have no clue how you would add 10px to 60%.

Say you have variables setup: $width1 = 10px; and $width2 = 50%;

width: <?php echo $width1 + $width2; ?>;

Is there any way to perform this kind of math so that static width values can be applied to older browsers? Maybe using css expressions as a fallback?

Answer 1

From my best guess, you can't. That's why CSS3 added that functionality, because CSS2 couldn't do it on its own. There are several CSS framworks that add that functionality. As far as unit conversion, you'd have to make some decisions about priority, using your example:

$width1 = 10px $width2 = 50%

Assuming (for this example) a 500px screen, if percentages takes priority, you'd first have a block that's 250px, to which you add 10px, resulting in 260px. If you go the other way, it would be 250px. (This is assuming auto takes priority over all, so auto + 10px, then 50% of it's parent container).