Values and units

●●●●●●●

Values and units – contents

●●●●●●●

• initial and inherit
• Old units (px, cm, mm, em, ex, pc, in, s, ms…)
• New units (vh, vw, vmin, vmax, rem, ch…)
• 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 }

(May 2013: Safari ok, Konqueror OK, Chromium ok, Firefox ok, 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.framed {
  border: 10px solid gold;
  padding: calc(2em - 10px) }
p.unframed {
  padding: 2em }

The two boxes have the same width

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

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

Values out of range

●●●●●●●

The -1em is ignored here and the result is 2em:

div {
 padding: 2em;
 padding: -1em  /* ignored, must ≥ 0 */ }

but not here:

div {
 padding: 2em;
 padding: calc(0px - 1em) /* accepted */ }

(-1em is still impossible, the nearest valid value, 0, is used)