Measuring in CSS is CoolMarch 07, 2016
For the Enterprise Developers
I wanted to highlight that all of the features I’m talking about in this post are supported in IE9 and above. That wasn’t intentional, but I thought I’d share considering the enterprise doesn’t always have the latest and greatest browsers setup across their organization.
You can find more of that at CanIUse.com.
REM (or Root EM) Units
This one doesn’t seem that cool, but it really is.
For the longest time, people have used em units to make sizing relative to the point value. So, if define a
font-size: 16px in my root element, then 1em refers to 16px. Easy right?
Well, what if someone further along down the cascade of stylesheets decides to set their
<section> element to have a
font-size: 24px because that’s how they’ve been doing fonts for the longest time. Now your em units are changed, and 1em no longer means 16px, and everything is all fiddle-faddle-foo.
With rem units, we’re always referencing the root point size. So, in our case, the original
font-size: 16px would always be used, even when our new developer adds a new
font-size rule to their stylesheet.
Here are a few CodePen examples from Jeremy Church that capture em and rem very well.
Here’s the scoop on browser compatibility in case you’re interested.
This one was new to me, and I like it quite a bit. Considering it’s supported across the board, I wish I had known about it sooner.
Viewport units are exactly what it sounds like— units of measure that represents a percentage of the height or width of the viewport. You get the option of
vh for viewport height,
vw for viewport width,
vmin for the smaller unit of either vh or vm, and
vmax for the larger of the two.
So, if you have
height: 1vh then you’re setting the height to 1% of the viewport height. It doesn’t matter if your screen is 480px high, then it’s 4.8px. When you flip the phone around into landscape mode, the height changes, and so do the units.
It might not sound like much, but it’s really helpful with things like typography. CSS Tricks has a great example. Plus, if you want buttons or elements to consume a certain amount of your screen, this is a great solution.
Yes, there are a few functions in CSS and this one is supported everywhere that matters.
This one lets you do unit calculations directly in your stylesheets. It might not sound like something you’d want to do, but it works really well when you want to position things in CSS dynamically. If you always want something 50px smaller than the 100% of the screen you can use
height: calc(100% - 50px); and you’ll get the value you’re looking for.
Take a look at the MDN page for the full details about
calc() and keep it in your back pocket.