Specifying Percentages that Play Nicely with calc()

The calc() function accepts any unit-ed value (a DIMENSION token), and also <percentage>s. Percentages are converted into an appropriate dimension based on the context in which calc() is used, and then combined with the other values to eventually produce a single value in an appropriate unit.

This works great when percentages and dimensions work the same way for a property - that is, when you can do a naive substitution of a percentage for an equivalent dimension and get the same result - but it's easy to accidentally break this property, which causes problems for calc().

In particular, background-position does not have this property - if the background area is a 200px square, using background-position: 75%; and background-position: 150px give substantially different results. As such, calc() needs to carve out an explicit exception for background-position if it wants to work in the intuitive way.

Do not follow the example set by background-position. Instead, ensure that percentages and dimensions have the same behavior, start from the same point, etc.

A working example of a property that was badly-behaved and was then fixed is word-spacing. Originally, word-spacing was defined so that lengths were added to the default word-spacing, while percentages were relative to the default word-spacing. So, if the default word-spacing was 10px, word-spacing: 50% and word-spacing: 5px did very different things - the first bunched words together, the second spread them apart. The spec was changed to make both of them add to the default word-spacing. Now, both of the above examples spread words apart the same amount, which is friendly with calc().

spec/calc-and-percentages.txt · Last modified: 2014/12/09 15:48 (external edit)
Recent changes RSS feed Valid XHTML 1.0 Valid CSS Driven by DokuWiki