Introducing the calc function

Jan 6, 2014
CSS
130 Shares
By

Math is a necessary (if not always welcome) tool in our programming languages. We use it constantly to make all kinds of dynamic decisions.

Until recently, it wasn’t available in CSS without a pre-processor; however the introduction of the calc function to CSS3 provides a way of running Math calculations natively which increases performance and even enables mixed units.

Browser support

Unusually, in the case of the calc function browser support is actually pretty good: on the desktop it’s supported by IE9+ and the latest versions of Firefox, Safari, Opera and Chrome; on mobile it’s supported by IE Mobile, Blackberry and Safari, but not Android and Opera. -moz and -webkit prefixes are supported by older browsers.

This level of support means that provided you include a simple fallback for non-compliant browsers, you can use the calc function today.

How to use the calc function

Let’s start with some basic math. Imagine we have three divs and we want these divs to be a third of the width of their parent. If the HTML looks like this:

<div class="one">
Div One
</div>
<div class="two">
Div Two
</div>
<div class="three">
Div Three
</div>

Then the CSS, with the calc function would look like this:

div {
height: 400px;
width: calc(100% / 3);
}

You can see a demo of this working here. Of course, a similar effect would be possible using a simple percentage.

However, where the calc function really comes into its own is when mixing units. For example:

section {
width: calc(100% - 3em);
margin-top: calc(10% + 10px);
}

As with math calculations in most languages, we can dictate the order the equation is resolved in using parenthesis:

div {
width: calc((100% - 200px) / 3 );
}

In this case 200px will be subtracted from the 100%, and the result will then be divided by 3.

(As with math functions in other languages, division and multiplication are performed before deduction and addition; without the parenthesis in the previous example 200px would be divided by 3 and the result subtracted from 100%.)

Final thoughts

We’ve needed something like the calc function in CSS for a very long time, and its lack was one of the main reasons developers turned to pre-processors.

With steadily increasing support the calc function is likely to be one of the most widely used tools in your CSS arsenal for many years to come. Do you use the calc function in your CSS? What fallbacks do you use for older browsers? Let us know in the comments.

Author: Sara Vieira
Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website.
  • dekimpeb

    Why would you mix units? And in which cases would calc be usefull …

    • Sara Vieira

      You may need to subtract or add a fixed unit from a percentage one.
      It is useful any time you need math , pre processors have this kind of functionality and it’s widely used for creating layouts.

  • realfunnyyouguys

    I think it will become much more useful when variables can be used. Until then I can’t think of many cases where I would use it. But it’s an important step in the right direction for sure.