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]


The Cheapest NBN 50 Plans

Here are the cheapest plans available for Australia’s most popular NBN speed tier.

At Lifehacker, we independently select and write about stuff we love and think you'll like too. We have affiliate and advertising partnerships, which means we may collect a share of sales or other compensation from the links on this page. BTW – prices are accurate and items in stock at the time of posting.

Comments


3 responses to “What Are The Benefits Of CSS3’s Experimental Calc() Function?”