Calc() function with Use Cases
I’m entirely sure that every front-end developer knows what calc() function is or at least met with it in some case.
This function is not the newest part of the CSS specs but still is a unique one. At first, I didn’t have a clue about how it works and what to use for. Of course, I went after it and learned the basics, but the most valuable use cases came to me in my daily job.
It is a tiny part of our toolkit, but I think it deserves a small and overall use case collection.
What does the calc() function do?
In short, it makes possible for you to make mathematical operations in your CSS; this can be easy in a programing language, but in a CSS alike language it is a big problem. In CSS you only could use exact values and sometimes this was a big problem because of the responsiveness.
With calc() now you can calculate your units based on your viewport or on a parent element. You can add, subtract, multiply, and divide your values. Dealing with this kind of operators in your code is not a big deal in the age of preprocessors. The big deal is that with the calc() your browser can calculate with different units; which means you can combine relative (em, %, vw) units with fixed unit like px.
To use the function all you have to do is to call the calc() function in your CSS declaration. Logically you can use this where the required value is unit based like widths, heights or rotation transform. The only important rule is that you always separate the operators with space.
Fixed Layout Element with Relative
If you want to make a fixed width sidebar or header in your basic layout, you can calculate the remaining area of your site.
This can be handy when you are making an admin template where you need a fix and complicated sidebar which is always visible. For this, you make a sidebar with 260px width and set the rest of the layout width calc(100% – 260px). We can also use this method with a fixed header; in this case, we use calc(100vh – 80px) for our content area height and 80px for our header.
Sure you can use this any layout, and you also can use ems or percentage, but in some cases, this hybrid solution is the right way.
Simplifying Absolute Centering
We all know that the most fundamental absolute centering is when we set 50% top and left value and pull back the element with both of the halves of the width and height with using the margins. This is a pretty outdated method because of Flexbox and CSS Grid, but it can be still useful and with calc() is a little bit simpler.
Relative Font Size Based on Viewport Width
With the introduction of the vw and vh units now we always can get our viewport width and height. Knowing this can be handy when you want to make a responsive square, but it is also useful when you like to scale up or down your font size based on screen size.
Just use a basic calc() operation with combined the vw unit and you are done.
See the Pen Pure CSS Responsive Font Size with Calc() Function by Adam Laki (@adamlaki) on CodePen.
Make a Simple Grid
In this example we make a 12 column float grid. As I mentioned previously with Flexbox and CSS Grid, this is a bit outdated but still helpful this day too. The key is a simple calculation with the column number:
Background Positioning to the Right Bottom
Using calc() you can calculate the right bottom of your element’s background with relative width like the following:
background-image: url(logo.png); background-position: calc(100% - 20px) calc(100% - 20px);
Nice to know this but now you can have an even better solution. The background-position property can have two optional parameters which define the offset axis like this:
background-image: url(logo.png); background-position: right 20px bottom 20px;
As you see, the use cases for calc() are rarely used ones. It is an advanced tool which is helpful when it is in your mind, and you start to think about it.
Keep in mind if you have to support older browsers you need some fallback which you can declare in a classic top to bottom (you overwrite the fallback with the modern solution).