I’ve been a bit lukewarm on my current project at work. The original concept had a lot of cool features that were slowly picked out over the past couple of months, for various reasons. It’s still very pretty, but I wish it did more.

However, cool things still keep popping up unexpectedly, as I try to make the interface do what the designer wants, and the latest very cool thing was learning about the viewport metrics vw (viewport width) and vh (viewport height).

These marvelous little CSS3 measuring units use a percentage of the size of the user’s screen *window* (whether it be mobile, tablet, or desktop, full screen or not) to scale font size, padding, margins, widths, heights, wherever the hell you would otherwise use em, px, or %. IT IS SO FREAKIN’ AWESOME.

I’ve seen some articles where developers are unsure of the usefulness of this, but it was a lifesaver for me. My project’s homepage is a grid of fifteen numbers that fills the entire screen, and the designer wanted each digit to always fill the space of its containing square. % and em weren’t cutting it, and @media calls were too jumpy. I really didn’t want to use images if I could help it. Enter vw and vh. Now the digits scale dynamically with the resizing of the window, and it’s AMAZING. I showed it to a developer colleague, and we both stood there watching in awe as I resized the window up and down and the digits changed accordingly. So beautiful.

Check it out for yourself at css-tricks.com.

I’m always surprised when I find new things in CSS–it’s so easy to think I know it all, yet so exciting when I learn that I really, really don’t. Thank you, vw and vh, for making last week a most excellent week.