Your browser may have trouble rendering this page. See supported browsers for more information.

This page shows the source for this entry, with WebCore formatting language tags and attributes highlighted.

Title

Some new CSS length units (and some lesser-known ones)

Description

I've been using CSS since its inception and use many parts of the CSS3 specification for both personal work and work I do for <a href="http://encodo.com">Encodo</a>. Recently, I read about some length units I'd never heard of in the article <a href="http://dev.opera.com/articles/view/css-viewport-units/" source="Dev.Opera" author="Chris Mills">CSS viewport units: vw, vh, vmin and vmax</a>. <ul> <c>1vw</c>: 1% of viewport width <c>1vh</c>: 1% of viewport height <c>1vmin</c>: <c>1vw</c> or <c>1vh</c>, whatever is smallest <c>1vmax</c>: <c>1vw</c> or <c>1vh</c>, whatever is largest </ul> These should be eminently useful for responsive designs. While there is wide support for these new units, that support is only available in the absolute latest versions of browsers. See the article for a good example of how these can be used. While the ones covered in the article are actually new, there are others that have existed for a while but that I've never had occasion to use. The <a href="http://www.w3.org/TR/css3-values/#font-relative-lengths" source="CSS Values and Units Module Level 3">Font-relative lengths: the ‘em’, ‘ex’, ‘ch’, ‘rem’ units</a> section lists the following units: <ul> <c>em</c>: This one is well-known: <c>1em</c> is equal to the <iq>computed value of the 'font-size' property of the element on which it is used.</iq> <c>ex</c>: Equal to the height of the letter 'x' in the font of the element on which it is used. This is useful when you want to size a container based on the height of a lower-case letter---i.e. tighter---rather than on the full size of the font (as you get with <c>em</c>). <c>ch</c>: <iq>Equal to the advance measure of the "0" (ZERO, U+0030) glyph found in the font used to render it.</iq> Since all digits in a font should be the same width, this unit is probably useful for pages that need to measure and render numbers in a reliable vertical alignment. <c>rem</c>: The same as <c>em</c> but always returns the value for the root element of the page rather than the current element. Elements that use this unit will all scale against a common size, independently of the font-size of their contents. <a href="http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/" source="CSS-Tricks" author="Roman Rudenko">There’s more to the CSS rem unit than font sizing</a> has a lot more information and examples, as well as an explanation of how <c>rem</c> can stand in for the still nascent support for <c>vw</c>. </ul>