David Baron's Weblog


Sunday, 2010-09-05, 12:15 -0700

I've been working on adding support for the calc() proposal that's in CSS3 Values and Units. I've now added support for -moz-calc(), -moz-min(), and -moz-max() functions to a significant number of properties. (Note that min() and max() do not have -moz- prefixes when they're inside an expression, but they do have prefixes when they're the top-level expression.)

Support for calc() allows style sheets to write things like this:

p {
  width: -moz-calc(50% - 4px);

Calc expressions can use the operators +, -, *, and /, the functions min() and max(), and parentheses. The operators + and - must have spaces around them. Values that have units (that is, lengths or percentages) can only appear in the numerator of a division, and cannot be multiplied by each other.

See Paul's blog entry for more examples.

This support applies to the following properties that accept lengths:

and the following properties that accept lengths and percentages:

1 Not in Firefox 4 beta 5, but in nightlies.

2 Not in Firefox 4 beta 5 or in nightlies, but will hopefully be in Firefox 4 beta 6.

Certain prefixed properties may be renamed to unprefixed forms prior to Firefox 4 release.

The following properties that accept percentages and lengths do not have support for calc(), and will not have it in Firefox 4 unless somebody convinces me in the next few days that it's worth adding it:

Update (2010-09-06 14:12): I actually forgot to mention a few properties in the above lists. (And nobody pointed out their absence, either.) Also in the unsupported list, I should have mentioned line-height, clip, and -moz-image-region. In the supported list, I should have mentioned -moz-transform (except it doesn't support min() and max()). And also in the supported list, I should have mentioned border-*-width and -moz-column-gap (with the caveat that they're not implemented yet, because I missed them, but they will be soon).