HTML and CSS Reference
In-Depth Information
Rem
CSS Level 3 introduces a new unit called
Rem
(Root em). The W3C is aware of the difficulties when dealing with
inherited values and em, so it introduced rem. Rem inherits its value only from the root element, that being the
<html>
element. So, in the em unit example, Item 3 inherited the value of its parent—causing its font size to
double; when you use rem, this wouldn't happen because each element inherits only the same font size from the root.
Although this is an easier way to use ems, unfortunately, it isn't supported in all browsers yet, so for the moment,
you cannot use rems to create a cross-browser-compatible website.
Ex
Ex refers to the x-height of a font (the height of the lowercase
x
) but unfortunately isn't particularly reliable. Because
of this, it is less commonly relied on for creating web pages; therefore, you don't use this unit in
CSS3 Foundations
.
Other Units
The CSS3 specification lists other units that haven't been covered in this chapter. You will learn to use angle units in
Chapter 12 when rotating elements, and time units in Chapter 14 when animating elements.
The specification also includes frequency and resolution units, which tend to have more of a special use-case and
viewport-percentage length units that, as yet, are unsupported in browsers.
If you'd like to know more about these unit types, please see the CSS3 Values module at:
Summary
Getting to know the different types of property values means the way in which you style a page can become more di-
verse and you can commit your design ideas to screen quicker, with greater accuracy.
In the next chapter, you'll learn many new presentational properties on which to use the values described in this
chapter. The Cool Shoes & Socks page will really start to transform into something that closer resembles a modern
day web page.
