What Are The Benefits Of CSS3’s Experimental Calc() Function?

What Are The Benefits Of CSS3’s Experimental Calc() Function?

Keeping up with the latest CSS features can be daunting — just when you’ve got your head around key frames and animations, you find out you can do scaling and translation using 3D acceleration. One such gem available in CSS3 is the “calc” function, which can be used to perform maths operations on various numbers and percentages, without the use of JavaScript.

Image: Kenny Louie / Flickr, licensed under Creative Commons 2.0

It certainly takes CSS in a different direction to the standard, fixed styling you may be used to and one might argue that this sort of functionality is best left in the world of JS, but to have to throw together a quick and dirty JavaScript function just to take care of a browser quirk seems overkill, when you could keep it all in your stylesheets.

Six Revision’s Jacob Gube recently had a closer look at calc(), to investigate its potential uses — and pitfalls. For example, often when accounting for various devices and browsers, you might need to adjust the horizontal or vertical width of a page. Gube’s example shows how a designer can mix CSS units — pixels and percentages in this case — to provide a fluid design that always knocks out space for a scroll bar, without resorting to JavaScript.

As Gube notes at the end of the article, calc() is not a finalised feature of CSS3, so it’d be premature to rely on it now as it could be dropped from the standard and subsequently, by the likes of Google and Mozilla.

A Quick Overview of CSS calc() [Six Revisions]


  • Stop mixing display and functionality you bastards. The irony is everyone hated on MS for its allowing of expressions in CSS like 10+ years ago…

    • I’m not sure how you see this as mixing display and functionality. Just because a calculation is being performed doesn’t make it functionality.

  • I am actually quite excited for calc, simply because I have a range of situations where I want something to take x size and something else to fill the remaining gap but there is no current way of doing it (because of the need to nest things within other things which scale to hide/show things and thus limiting the use of % etc).

Show more comments

Comments are closed.

Log in to comment on this story!