Values and units – contents

●●●●●●

• initial and inherit
• Units (px, cm, mm, deg…)
• calc(...) – expressions
• toggle(...) – not the inherited value
• attr(...) – copy the value of an attribute

Explicit inheritance: inherit

●●●●●●

(Level-2 feature)

a:visited {color: inherit}

The color of the parent, whatever it is

Reset to the initial value: initial

●●●●●●

From the demo:

div.back { font-size: initial }

(January 2013: Safari ok, Firefox with prefix, Opera no)

(In fact, for 'font-size' there are two other ways to achieve the same: 'medium' and '1rem'.)

Expressions: calc()

●●●●●●

For calculations ( + - * / ) that depend on the current rendering.

From the demo:

p.boxed {border: solid 2px;
 padding: calc(0.6em - 2px)  calc(1em - 2px);

Reduce the padding by the thinkness of the border

Calc() syntax

●●●●●●

„+” and „-” must have spaces on both sides

Only values of the same type can be added: calc(1em + 2s) is wrong

Division (/) only by numbers: calc(100% / 10em) is wrong

Division by 0 is evidently not possible

(January 2013: FF ok, IE ok, Opera no, Safari 5 no, Safari 6 with prefix, Chrome with prefix)