What’s new in CSS3 Values and Units?

In CSS3 the values and units we can use in CSS properties are defined in the appropriately named CSS Values and Units specification, with the exception those relating to colour and images, and the pre-defined keywords specific to individual properties.

This spec gives us one new CSS wide keyword to play with (the initial keyword), five new relative units for lengths, five new functional notations, and various new types and units to support new CSS3 modules such as Grid and Flexbox layout, Transitions, and Transforms.

CSS-wide initial keyword

CSS2.1 added the first CSS-wide keyword to every property with the inherit keyword. CSS3 adds to this with the initial keyword. When you set a property’s value to initial it will set the value to what is defined as the initial value in the CSS specification for that property. Note that this is sometimes, but not always the same as the default value set in the user-agent style sheet. For example the initial value for various margin and padding properties is 0, but the default value given by the user-agent depends on the element to which it applies.

The initial keyword can be useful if an element is inheriting unwanted styles and the original styling is desired. It is probably not something you will need to use often, but it is a useful tool to have on occasions. This is currently only supported by WebKit and Firefox (with moz prefix: -moz-intitial).

Take a look at the initial keyword demo I prepared to see this in action. This currently requires a Gecko or WebKit browser at the time of writing.

Font relative length units

The rem unit

The rem unit is perhaps my favourite new part of CSS3 Values. It stands for root em, and if you already understand how ems work (I assume that is most of you?) then you’ll be right at home. They are only subtly different, but it makes them easier to work with.

The root part of the name refers to the root element, or the html element in HTML and the initial svg element in SVG. With regular ems the size of 1em is set to value of the font-size property of the current element, or the size of the parent element’s text size when used with the font-size property itself. The font size varies from element to element, so the size of an em is not consistent across the document. This requires a lot of calculation when you are tying to line elements up or are tying to compose text to a vertical rhythm.

The rem value however stays consistent across the document, as 1rem is always the same size as the font-size of the html element (or root of which ever language you are using). If you want a margin to be a certain length, you just need to calculate it once for any element. If you want to make the maths as easy as possible you can set the html element to have a font-size of 10px (or another multiple of 10), then set the desired body copy size on the body element, such as font-size: 1.2rem for 12px. Now you get the scalability benefits of ems along with the ease of use and predictability of pxs.

The only downside is the browser support. Its supported in IE9, Firefox 3.6+, Safari 5+ and Chrome. It is also coming to Opera 12, which should hopefully be released soon. As Opera users generally upgrade fast, and Firefox <3.6 is only around 1% market share, your only real issue in the near feature will be those users stuck on IE6–8. Using a fallback is easy if you set the root font size to 10px, as you can set every size you set in rems to the equivalent px size. For example 2rem is 20px, 1.7rem is 17px, and so on. It adds a lot more page weight however.

I’ve prepared a rem unit demo which shows how you can follow a vertical rhythm using this unit.

The ch unit

The ch unit is equal to the width of the 0 (zero) glyph in the font used by the current element. This is mostly useful when using monospace fonts, where all glyphs are the same width. For example, if you have a pre element where you want it to wrap after a 55 of characters, you can use width: 55ch; unit.

This unit is currently only supported by Internet Explorer 9 and Firefox.

Viewport relative lengths

There are three viewport relative lengths: vh, vw, and vm. These are relative to the size of the initial containing block, or in other words the viewport. If you resize the viewport, such as changing the size of the browser window, then the size of elements specified in these units will change.

The vw unit

This is relative to the width of the viewport. One vw unit is 100^th of the width of the viewport. If the viewport is 1000 pixels wide then 10vw would map to 100px.

The vh unit

The vh unit works the same way as vw, but is relative to the height of the viewport instead.

The vm unit

The vm unit maps to whichever of the viewport width or hight is the smallest. There is some talk of dropping this as the same can be achieved using the min() functional notation.

These new units can be very useful if you don’t want something to end up larger than the viewport. One use case I’ve had for these is while using multi-column layout. You often don’t want text using multi-column to be taller than the screen size as the user will have to scroll up and down for each column. With vh you could use for example height: 95vh which would make it 95% of the height of the viewport, no matter how tall the viewport is. You could also imagine them being useful for things like slide shows, video players, and mobile.

You might think these units sound great, but unfortunately they currently only work in IE9 and above, so it will be some time before we can used them.

The rest

There are new units for angles (deg, grad, rad, and turn units) and times (s, ms units. These are used in CSS3 2D/3D Transforms, and CSS Transitions respectively. There are also new units for frequencies (Hz, kHz units). These are used in the CSS3 Speech module.

There are new layout specific units: fractions using the fr unit, and grid units using the gr unit.

It doesn’t make too much sense covering these, without coving the full spec for which they are used, so I will leave them for a later date. There are also five functional notations, which require in-depth explanation, so they deserve their own post. I will cover these in the near future. These are mathematical expressions (calc(), min() and max()), cycling values (cycle()), and attribute references (attr()).

I hope you find some useful ways to use these new values and units that we now have to play with.

7 months ago  /  87 notes  /