David Baron's Weblog

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:

• -moz-box-shadow ^†
• -moz-column-width
• border-spacing
• letter-spacing
• marker-offset
• outline-offset
• text-shadow
• word-spacing

and the following properties that accept lengths and percentages:

• -moz-border-radius ^{2 †}
• -moz-border-radius-* ^{2 †}
• -moz-margin-end ¹
• -moz-margin-start ¹
• -moz-outline-radius ²
• -moz-outline-radius-* ²
• -moz-padding-end ¹
• -moz-padding-start ¹
• bottom
• height
• left
• margin-bottom ¹
• margin-left ¹
• margin-right ¹
• margin-top ¹
• max-height
• max-width
• min-height
• min-width
• padding-bottom ¹
• padding-left ¹
• padding-right ¹
• padding-top ¹
• right
• text-indent ¹
• top
• vertical-align ¹
• width

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

² 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:

• -moz-transform-origin
• background-image (gradient stop positions inside -moz-*-gradient functions)
• background-position
• background-size
• stroke-dasharray
• stroke-dashoffset
• stroke-width

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).