CSS3 Proprietary and Emerging Features Reference - HTML and CSS: The Complete Reference - page 621

CSS3-Introduced Values and Units
CSS3 introduces a number of new measurement values. Some of these were supported for
aural style sheets but others are all new. Table 6-4 details most of the new measurements
and values currently being proposed in the CSS3 specification plus a few others from
related specifications.

Measurement Description Example

ch A font-related length that is

equivalent to the width of
the character 0 (zero) in the
current font.

#swiss {font-size: 4ch;}

Degrees

deg transform: scale(1.0) rotate(0deg);

Dots per centimeter

dpcm @media print and (resolution:

100dpcm) { /* some rules */ }

dpi Dots per inch (used in media

queries).

@media print and (resolution: 300dpi)
{ /* some rules */ }

gr The distance between grid

lines.

#img1 {width: 2gr;}

grad Grads #at90deg {elevation: 100grad;}

Hertz

Hz #barrywhite {pitch: 70Hz;}

kHz Kilohertz #treble {pitch :6kHz;}

ms Milliseconds #a1 {transition-property: color;

transition-duration: 500ms;}

rad Radians #voiceAbove {elevation: 50rad;}

rem The font size of the

document's root element.

#innerP {font-size: 1.5rem;}

s Seconds #a2 {transition-property: color;

transition-duration: 1s;}

A value relative to the
viewport's height. The full
viewport height is 100vh.

vh .halfHeight {width: 50vh;}

Either the viewport's height or
its width, whichever is smaller.
The minimum value is equal to
100vm.

vm #halfBox {height: 50vm; width: 50vh;}

vw A value relative to the viewport's

width. The viewport's full width
is 100vw units.

.halfWide {width: 50vw;}

T ABLE 6-4 Emerging CSS3 Units