If you would have asked me about the CSS Calc function six months or so ago I would have said “What’s That?”. But luckily for me I stumbled across some blog post highlighting the coolest new CSS stuff that’s available for us to use and CSS Calc was one of them. It’s really a pretty useful item to have at our disposal.

calc(expression) 1 calc ( expression )

It allows you to do math without the need of a preprocessor. With CSS Calc your imagination is the only limit to what you can do. One of my favorites is that you can use CSS Calc to properly position background images based off of the bottom right corner. Without Calc this just isn’t possible unless you add extra blank space to the image or something.

The HTML:

<div class="item"> Checkout My Background! </div> 1 2 3 <div class = "item" > Checkout My Background! </div>

The CSS:

.item { background-image: url(graphic.svg); background-position: calc(100% - 20px) calc(100% - 20px); background-repeat: no-repeat; height: 170px; } 1 2 3 4 5 6 .item { background-image : url ( graphic.svg ) ; background-position : calc ( 100% - 20px ) calc ( 100% - 20px ) ; background-repeat : no-repeat ; height : 170px ; }

The Demo:

Checkout My Background!

All I’ve got to say is I wish I knew about CSS Calc sooner!

Browser Support

The CSS Calc function has good browser support working in all modern browsers. Not supported in Internet Explorer 8 and below.

Sources