Bert Bos | CSS tutorial – values

Values and units

Values and units

Values and units – contents

cm, mm, in en pt are unfortunately no longer useful on screen media. So far there is no replacement.

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)