WordPress Twenty Twelve theme rocking with rem relative lengths in CSS

I started messing around with the new WordPress.org twenty twelve theme. In the notes at the top of style.css, I found this:

— This stylesheet uses rem values with a pixel fallback. —

(full rem note from twenty twelve style.css – http://pfhyper.com/css/rem.html)

I had never heard of rem values before. I brought it up at the Coco WordPress Wednesday table and no one there was familiar with them either.

It's sort of a super-charge em value in that you can define the base in the html or body element and that will always be base no matter how deep you go with parent/child relationships with your CSS. Browser support isn't bad although it's recommended to use a pixel fallback for the older browsers.

Some googling led me to the W3C site where I found that there are all sorts of relative length units I'd never heard of: ch, vw, vmin, vmax, and vh.
http://www.w3.org/TR/css3-values/#relative-lengths

Here are a couple of links for further rem reading.
http://snook.ca/archives/html_and_css/font-size-with-rem
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s