Waarden & eenheden

(Values & units)

cm, mm, in en pt helaas niet langer bruikbaar. Nog geen alternatief.

Module

• initial en inherit
• Eenheden (px, cm, mm, deg…)
• calc(...) – berekeningen
• toggle(...) – niet de geërfde waarde
• attr(...) – kopieer de waarde van een attribuut

Expliciet erven: inherit

Expliete overeving (niveau 2)

a:visited {color: inherit}

De kleur van de ouder, welke dat ook mag zijn

Terug naar beginwaarde: initial

Uit de demo:

div.back { font-size: initial }

(Januari 2013: Safari ok, Firefox met prefix, Opera nee)

Berekeningen: calc()

Voor berekeningen ( + - * / ) die afhangen van de actuele weergave

Uit de demo:

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

Verminder de padding met de dikte van het kader

Calc() syntax

„+” en „-” moeten aan weerszijden een spatie hebben

Alleen waarden van hetzelfde typen kunnen worden opgeteld: calc(1em + 2s) is fout

Delen (/) kan alleen door getallen: calc(100% / 10em) is fout

Delen door 0 kan uiteraard ook niet

(Januari 2013: FF ok, IE ok, Opera nee, Safari 5 nee, Safari 6 met prefix, Chrome met prefix)

Einde

→ Terug naar agenda