This article describes the CSS3 calc() value. This feature hasn’t landed yet in any Firefox tree but work to implement it is underway.

Firefox will support the CSS calc() value, which lets you compute a length value using an arithmetic expression. This means you can use it to define the sizes of divs, the values of margins, the widths of borders, and so forth.

Here is an example of a layout which would be tricky to setup without the calc() function:

1 /*
 2 * Two divs aligned, split up by a 1em margin
 3 */
 4 #a {
 5   width:75%;
 6   margin-right: 1em;
 7 }
 8 #b {
 9   width: -moz-calc(25% - 1em);
10 }

This example makes sure an input text field won’t overlap its parent:

1 input {
2   padding:2px;
3   border:1px solid black;
4   display:block;
5   width: -moz-calc(100% - 2 * 3px);
6 }

One particularly powerful feature of the calc() function that you can combine different units in the same computation:

1 width: -moz-calc(3px   50%/3 - 3em   1rem);

The current implementation supports the , -, *, /, mod, min, and max operators.

We’ll also support the min() and max() functions, which could be used like this:

1 div {
2   height: -moz-min(36pt, 2em);
3   width: -moz-max(50%, 18px);
4 }

For more details, see:

• Mozilla’s bug
• W3C’s reference

Nice! Too bad this particular function will be completely useless until every other browser implements it. Progressive enhancement simply will not work with this one.