Experiment Results using CSS Calc in Mozilla Firefox 4With the release of CSS3 comes the introduction of a powerful new function, the calc() function. With it you can specify length values based on the arithmetic, rather than simply using fixed numbers.

Calculating values is particularly useful in replicating the same look across multiple browsers and devices. In this introduction we’re going to walk through proper use and compatibility, followed by a simple example of fluid layouts.

Introduction to Calculations in CSS3

The operators that we have at our disposal are self explanatory: plus sign, minus sign, asterisk, forward slash, and “mod” for modulus.

The CSS Operators and their Basic Usage
Example Name Result
25% + 5px Addition Sum of 25% and 5px
2.5em – 5px Subtraction Difference of 2.5em and 5px
25% * 2 Multiplication Product of 25% and 5px
25% / 2 Division Quotient of 25% and 2
25% mod 2 Modulus The remainer of 25% divided by 2
Not currently supported by Firefox

Your calc() equations are used in place of fixed values, and can contain values that use different units (%, em, px, cm, etc.) so long as they are all the same type. In the examples thus far, they’ve been calculations of the length type.

Syntax

Your function should be used in place of fixed values, in the format of calc(VALUE OPERATOR VALUE);, as seen in the following example, which adds a few pixels to the default font-size of 1em:

span.textThreePlus {
	font-size: calc(1em + 3px);
	<!-- Don't forget the vendor extensions -->
	<!-- Firefox -->
	font-size: -moz-calc(1em + 3px);
	<!-- Chrome and Safari -->
	font-size: -webkit-calc(1em + 3px);
}

It’s also possible to group expressions in parentheses, like so:

#footer {
	height: calc((10% - 4px) /  2 + 3px);
}

You should keep in mind that any time a negative value is supplied to a property where negative values are invalid (like in the case of the width property), the value returned will default to 0px.

Order of Mathematical Operators

After seeing the example above, it’s probably good time to brush up on something we learned in elementary school – the order of operators, or the order in which your expressions will be calculated.

  1. Expressions inside parentheses
  2. Multiplication, Division and Mod, conducted in the order that they appear (left to right).
  3. Addition and Subtraction, also ordered left to right.

Example of Dynamic Layouts using Calc

We’ve all been faced with the challenge of responsive design, or making our sites or applications look similar across different screen resolutions, a situation that calc() function is absolutely perfect for. It’s easy enough to create a fluid design using percentages, but by mixing percentages with fixed values we have much more control over how our visuals are displayed to the end user, no matter their resolution.

Let’s take a look at a basic example of a two-column layout where we use percentages for the width and padding, and force the browser to adjust the width by removing the combined values of our padding.

The HTML5 Markup

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page Title</title>

</head>

<body>

<div id="wrapper">
	<header><h1>Page Title</h1></header>
	<nav>Site Navigation</nav>
	<section>Main Content Block</section>
	<aside>Sidebar</aside>
	<footer>Footer</footer>
</div>

</body>
</html>

The CSS Stylesheet

html, body {
	margin: 0;
	padding: 0;
}
#wrapper {
	width: 75%;
	margin:0 auto;
}
header {
	padding: 10px;
}
nav {
	padding: 10px;
}
section {
	float:left;
	width:60%;
	padding: 10px;
}
aside {
	float:right;
	width: 20%;
	/* The above is just a safe fallback
	width value for browsers that don't
	yet support the calc function */
	width: -moz-calc(40% - (10px * 4));
	/* Mozilla calc function */
	width: -webkit-calc(40% - (10px * 4));
	/* Webkit calc function */
	width: calc(40% - (10px * 4));
	/* Calc for W3C-compliant browsers */
	padding: 10px;
}
footer {
	clear: both;
	padding: 10px;
}

As you can see, it becomes a lot easier to maintain the relative size and spacing of elements by calculating their values as opposed to setting them as fixed percentages. We could do this on every single container, but in the example above, I just used a calculation on the sidebar to account for the padding we’ve set on the left and right of each column.

Conclusion

There are tons of great applications for a mathematically calculated function, and I’m sure we’ll be seeing a lot more of it soon, particularly when calculating angles for rotate transformations.

It should also be noted that, as of Sunday, February 5th, 2012, the calc() is entirely unsupported in WebKit-based browsers (Chrome, Safari). However, in early January, we got word from Mike Lawther, a Google Chrome engineer that “…the lexical analysis is done, but the results are ignored [in WebKit browsers].” Mike went on to explain that he has a patch for the function in WebKit, and that he’s currently working on landing it piece-by-piece.

 

Have you created some interesting uses for the calc() function? Share it with us by leaving a comment below.

POSTED BY
POSTED IN Tutorials
DISCUSSION 1 Comment
TAGS

One Response to : How-to use the Calc Function in CSS3

  1. Myung Wi says:

    nice post, I can’t wait for chrome to support the calc function, do you know when google will put calc in chrome?