Differences
This shows you the differences between two versions of the page.
| Last revisionBoth sides next revision |
spec:calc-and-percentages [2012/01/23 13:22] – created TabAtkins | spec:calc-and-percentages [2012/01/23 13:28] – Emphasized the key paragraph in the page TabAtkins |
---|
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. | 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. | **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()''. | 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()''. |