Code and Stuff

Jun 19, 2012

CSS Units

CSS defines a lot of units for different type of measures. Here a few examples and some explanations. The interactive parts should work on Firefox and webkit (where applicable), did not test on IE and Opera.

Length units

Absolute

The main absolute length (size) unit, when working for the screen, is the pixel (px).

CSS defines also some other absolute length units. These are more useful for print, but can be used also on a display (discouraged). The discouraging holds also the other way around: px should be used with care when printing.

pt
3/4
mm
25.4/96
pc
1/16
cm
2.54/96
in
1/96
1px
px
4/3
mm
25.4/72
pc
1/12
cm
2.54/72
in
1/72
1pt
px
96/25.4
pt
72/25.4
pc
6/25.4
cm
0.1
in
10/2.54
1mm
px
16
pt
12
mm
25.4/6
cm
2.54/6
in
1/6
1pc
px
96/2.54
pt
72/2.54
mm
10
pc
6/2.54
in
1/2.54
1cm
px
72
pt
96
mm
25.4
pc
6
cm
2.54
1in

Font Relative

0.
x
1ex
1em
1ch
All major browsers support at least two font relative units: em and ex. As the "image" on the side shows, the em is the total font height while the ex is usually the height of the x character (one exception is when the font doesn't have the letter x). The font that is used for this sizes is the one applied to the tag (therefore the inherited one if none is explicitly specified).

Another font relative measure of units is the rem. The rem (root em) is the same as the normal em but related to the root element.

And there is also ch. This last font related unit is the advancement of the character '0' (zero) of the current font. In fonts that are not monospaced the advancement of a character depends of the character (see below).

00000mmmm

The ch unit is currently (June 2012) not supported by webkit browsers.

Viewport relative

CSS3 introduces also viewport relative units: vh, vw and vmin.
1vh = 1% of the height of the initial viewport
1vw = 1% of the width of the initial viewport
1vmin = 1% of the smallest between width and height of viewport

Percent

One more unit is the percent. Percents are relative to something. In the case of fonts they are related to the parent. For lengths (for instance: width and top), the percent, is related to the size of the first positioned element, or when none, to the size of the whole document.

Rotation Units

Rotation units are used, for instance, in transformations and radial gradients.
1turn
1rad
10deg
10grad
1 turn equals
2π rad
360 deg
400 grad
1 rad equals
1/2π turns
180/π deg
200/π grad
1 deg equals
1/360 turns
π/180 rad
9/10 grad
1 grad equals
1/400 turns
π/200 rad
10/9 deg
Move the mouse over the units on the left

Other units

CSS defines also units for pixel density, time (s, ms), frequencies (hz, khz), color, etc. I will not cover them here since quite trivial (time and frequencies) or enough complex to deserve a separate post (color, densities).

Mixing Units

Finally, there is another very nice feature that plays a role here. Let's assume we are using an element that has width of 50% wide and has a border of 10px. What if we want to place beneath it another element with same width but no border. Setting a width of 50% would make it 20px to narrow (2 borders of 10px) and the actual width depends on the size of the container. Fortunately CSS3 can perform computation. We can set the width of the second element to "calc(50% + 20px)".
width:50%; + 2x 10px border
width:50%
width: calc(50% + 20px)

The source code (without background colors) for the example above is

<div style="width:50%; border:10px solid">width:50%; + 2x 10px border</div>

<div style="width:50%;">width:50%</div>

<div style="width:-moz-calc(50% + 20px); width:-webkit-calc(50% + 20px); width:calc(50% + 20px);">width: calc(50% + 20px)</div>

Further reading

You can get some more information about units here:

http://www.w3.org/TR/css3-values
https://developer.mozilla.org/en/CSS/length

No comments: