Key Takeaways
- The CSS3 calc() function allows for the calculation of lengths, numbers, angles, transition/animation times or sound frequencies, and it supports the mixing of measurement types. This function is especially useful in layout design as it allows for precise width calculations in fluid or responsive layouts.
- Browser support for the calc() function is currently limited. It is natively supported by Internet Explorer 9 and Firefox (with a prefix), but not yet implemented in webkit (Chrome and Safari) or Opera. However, progressive enhancement can be used in stylesheets to ensure compatibility across different browsers.
- The CSS3 min() and max() functions, which return the minimum or maximum of two or more comma-separated values, are also useful for controlling relative font sizes, though they are not currently supported in any of the latest browsers.
#element1, #element2 {
float: left;
width: calc(50% - 30px);
}
#element2 {
margin-left: 60px;
}
Perhaps you want a margin which is relative to the font size — such as 4em? No problem:
#element1, #element2 {
width: calc(50% - 2em);
}
Or maybe you want a 2px border around both elements:
#element1, #element2 {
width: calc(50% - 2em - 4px);
border: 2px solid #000;
}
I recommend you keep calculations simple, but it’s possible to use complex formulas, e.g.
#element1, #element2 { width: calc((50% + 2em)/2 + 14px); }
Browser Support
The calc() function is a W3C recommendation so guess which browser offers native support? You’re wrong. At the time of writing, it’s just Internet Explorer 9. Firefox also supports it with a prefix; -moz-calc(). It’s not been implemented in webkit (Chrome and Safari) or Opera yet but, it’s so useful, I suspect we won’t need to wait long. Fortunately, you can use progressive enhancement in your stylesheets:#element1, #element2 {
width: 45%; /* all browsers */
width: -moz-calc(50% - 30px); /* Firefox 4+ */
width: calc(50% - 30px); /* IE9+ and future browsers */
}
Remember that you’d also need to adjust margins accordingly, e.g.
#element2 {
margin-left: 10%; /* all browsers */
margin-left: -moz-calc(60px); /* Firefox 4+ */
margin-left: calc(60px); /* IE9+ and future browsers */
}
CSS3 min() and max()
If you like calc(), you’ll love the min() and max() functions. They accept two or more comma-separated values and return the minimum or maximum accordingly, e.g.#myelement {
width: max(300px, 30%, 30em);
font-size: min(10px, 0.6em);
}
The functions will be especially useful when using relative font sizes to ensure text does not become too large or small.
Unfortunately, min() and max() are not currently supported in any of the latest browsers. Let’s hope they appear soon.
Frequently Asked Questions about CSS3 Calc Function
What is the CSS3 calc() function and how does it work?
The CSS3 calc() function is a powerful tool that allows you to perform calculations to determine CSS property values. It can be used with length, frequency, angle, time, percentage, number, or integer data types. The function works by taking two or more values and an operator (+, -, *, /) to perform a calculation. The result of the calculation is then used as the value for the CSS property. For example, you can use calc() to create a div that is always 50% of the viewport width minus 20 pixels, like so: width: calc(50% – 20px).
Can I use the CSS3 calc() function with any CSS property?
The CSS3 calc() function can be used with any CSS property that accepts values of length, frequency, angle, time, percentage, number, or integer data types. This includes properties like width, height, margin, padding, font-size, line-height, and many others. However, it’s important to note that the calc() function may not be supported by all CSS properties in all browsers, so it’s always a good idea to check for browser compatibility before using it.
Are there any limitations or caveats when using the CSS3 calc() function?
While the CSS3 calc() function is incredibly versatile, there are a few limitations and caveats to be aware of. First, the calc() function is not fully supported in all browsers, particularly older versions. Second, the calc() function cannot be used in property values that do not support mathematical expressions, such as the content property. Finally, while the calc() function can perform calculations using different units of measurement, the result may not always be as expected due to rounding errors or differences in how browsers interpret the calculations.
How can I use the CSS3 calc() function to create responsive designs?
The CSS3 calc() function is a powerful tool for creating responsive designs. By using calc(), you can create flexible layouts that adapt to different screen sizes and resolutions. For example, you can use calc() to create a layout where the width of an element is always a certain percentage of the viewport width minus a fixed amount of pixels. This allows the element to resize dynamically based on the viewport size, while still maintaining a certain amount of margin or padding.
Can I use the CSS3 calc() function to perform complex calculations?
Yes, the CSS3 calc() function can be used to perform complex calculations involving multiple values and operators. However, it’s important to note that the calc() function follows the standard order of operations in mathematics, meaning that multiplication and division are performed before addition and subtraction. If you want to change the order of operations, you can use parentheses. For example, calc((1em + 2em) * 3) will first add 1em and 2em together, and then multiply the result by 3.
Can I use the CSS3 calc() function with CSS variables?
Yes, the CSS3 calc() function can be used with CSS variables. This allows you to create more dynamic and flexible styles. For example, you can define a CSS variable for a base font size, and then use the calc() function to calculate different font sizes based on that variable.
How does the CSS3 calc() function handle different units of measurement?
The CSS3 calc() function can handle different units of measurement in a single calculation. This means you can add, subtract, multiply, or divide values with different units, such as percentages and pixels. However, it’s important to note that the result may not always be as expected due to rounding errors or differences in how browsers interpret the calculations.
Can I use the CSS3 calc() function in media queries?
Yes, the CSS3 calc() function can be used in media queries. This allows you to create more dynamic and flexible responsive designs. For example, you can use calc() to calculate the width of an element based on the viewport size, and then use a media query to change the calculation at different breakpoints.
Can I nest CSS3 calc() functions within each other?
Yes, you can nest CSS3 calc() functions within each other. This allows you to perform more complex calculations. However, it’s important to note that each nested calc() function must be a valid calculation on its own. For example, calc(100% – calc(50px + 2em)) is a valid nested calculation.
How can I debug issues with the CSS3 calc() function?
Debugging issues with the CSS3 calc() function can be tricky, as the function may not always behave as expected due to browser compatibility issues, rounding errors, or differences in how browsers interpret calculations. One common approach is to simplify the calculation as much as possible, and then test it in different browsers to see if the issue persists. You can also use developer tools like the browser’s console or inspector to check the computed value of the CSS property.
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.