If a browser has to deal with the following CSS:
font-size: 12pt;,
how does it calculate the effective size on the screen? Can it know the dpi's of the screen (via some OS function) or is it just an approximation?
If it is an approximation - is it always the same one (12pt = 16px) ?
Does some browser programmer team write about this? (A reference would be great)
CSS offers a number of different units for expressing length. Some have their history in typography, such as point (pt) and pica (pc), others are known from everyday use, such as centimeter (cm) and inch (in). And there is also a “magic” unit that was invented specifically for CSS: the px. Does that mean different properties need different units?
No, the units have nothing to do with the properties, but everything with the output media: screen or paper.
There is no restriction on which units can be used where. If a property accepts a value in px (margin: 5px) it also accepts a value in inches or centimeters (margin: 1.2in; margin: 0.5cm) and vice-versa.
The relation between the absolute units is as follows: 1in = 2.54cm = 25.4mm = 72pt = 6pc
The so-called absolute units (cm, mm, in, pt and pc) mean the same in CSS as everywhere else, but only if your output device has a high enough resolution. On a laser printer, 1cm should be exactly 1 centimeter. But on low-resolution devices, such as computer screens, CSS doesn't require that. And indeed, the result tends to be different from one device to another and from one CSS implementation to another. It's better to reserve these units for high-resolution devices and in particular for printed output. On computer screens and handheld devices, you'll probably not get what you expect.
Also because units in pt can be only approximated on screen (from above text) it is not recommended for use on screen media.
Source: EM, PX, PT, CM, IN…
The most clear statements were found in this article: http://www.w3.org/Style/Examples/007/units.en.htm (Thanks @Amit.)
In the past, CSS required that implementations display absolute units correctly even on computer screens. But as the number of incorrect implementations outnumbered correct ones and the situation didn't seem to improve, CSS abandoned that requirement in 2011. Currently, absolute units must work correctly only on printed output and on high-resolution devices.
In fact, CSS requires that 1px must be exactly 1/96th of an inch in all printed output. CSS considers that printers, unlike screens, do not need to have different sizes for px in order to print sharp lines. In print media, a px thus not only has the same visual appearance from one device to another, but indeed it is measurably the same (just as the cm, pt, mm, in and pc, as explained above).
And from here: w3.org/TR/css3-values/#absolute-lengths (Thanks @Alexey)
They [the absolute length units] are mainly useful when the output environment is known.
For a CSS device, these dimensions are either anchored (i) by relating the physical units to their physical measurements, or (ii) by relating the pixel unit to the reference pixel. For print media and similar high-resolution devices, the anchor unit should be one of the standard physical units (inches, centimeters, etc). For lower-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit. For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.