Why is calc at-risk?

10 December, 2013

Calc makes CSS very, very pretty.

It does the heavy lifting for you.

You can mix percentages with pixels or ems, and add, subtract, multiply and divide.

So why is calc an at-risk feature? See here for more.
Is it because it won't be included in the next iteration or that the spec-sters are working on parts of it?

In my opinion, it's too valuable to lose.

Even browser support is great.

Can't I already do this with a CSS preprocessor like SASS/LESS/Stylus?
Nope. You can't. The stuff that calc handles, which is mixing units like percentages and pixels, needs to happen at the time of rendering. A preprocessor can't do that, by its very nature, although it supports math operations.

Doesn’t box-sizing: border-box eliminate the need for calc?
Well, border box-sizing definitely saves time by including padding and borders with the width and height of your element. In that sense, it does allow you to have boxes in percentages with padding in pixels (which would drive you nuts any other way, save for calc). In a nutshell, calc can do this, but IMHO box-sizing: border-box is the way to go.

Calc has other tricks up its sleeve, though, that nothing else in CSS can match.

Can I use calc already?
Browser support is pretty good.

Desktop/Mouse: IE9+, FF4+, Chrome 19+, Safari 6+, Opera 15+

Touch: Android 4.4+, Blackberry 10+, Opera Mobile 16+, Chrome for Android, FF for Android, IE10+

I've gathered the above from the superb caniuse.com.

Besides, you can always declare a fallback value for non-supporting browsers. Of course, it's your choice to use an at-risk property, but something tells me calc is going to be supported for a long time to come.

What prefixes do I need to use, if I adopt calc in my stylesheets? Currently, you probably only need a webkit prefix, but you can add moz if you need to support Firefox users version 15 and below (highly unlikely). And as I mentioned above, please declare a fallback value for non-supporting browsers.

Let's take a look at some real-world use cases for calc; it has saved my life on a couple of occasions.


Use case 1: Fixed width sidebar and fluid main content column
This one's a hard one if you've ever tried to implement it. You have that perfect width sidebar that never needs to be wider or narrower. That one fluid column that adapts to the screen. At some point, it's likely you'll make them both full width on a media query.

Here's how you'd do it with calc, which seems like the cleanest and most natural solution.

Re-size the window and see how the sidebar does not change width, although the fluid column does.

See the Pen CSS Calc for mixing fixed width and fluid columns by Karen Menezes (@imohkay) on CodePen

Use case 2: Really fluid grids with no calculator, just calc
Hey there stranger? Need 6 boxes of equal widths on your site? Usually pull out a calculator or use a fluid grid solution?

All you need to do is this:

.myDiv {
width: calc(100% / 6);

I kid you not. Not the prettiest example, but you get the drift...

See the Pen oyeuq by Karen Menezes (@imohkay) on CodePen

Use case 3: Vertically centering an element of known dimensions inside an element of unknown dimensions

There are a couple of ways to do this. Using display-table, flexbox, the negative margin hack, or the super cool CSS translate hack.. This is generally most useful if you need to vertically center an icon or small bit of text in a div of variable height.

See the Pen CSS Calc for vertically centering an element of known dimensions by Karen Menezes (@imohkay) on CodePen

Related tags: Box-Sizing, Calc, Responsive

comments powered by Disqus