calc

< css‎ | functions
Jump to: navigation, search

calc

This article is Ready to Use.


W3C Candidate Recommendation

Summary

The calc() function can be used anywhere in a length is required by a CSS properties. calc() allows mathematical expressions with addition (‘+’), subtraction (‘-’), multiplication (‘*’), and division (‘/’) to be used as component values. The values themselves can be a mixture of percentages, integers, numbers, lengths such as em or cm, angles or even time values ( seconds, milliseconds). Calc is useful for computing certain values that are not known at the development time or to set formulated values rather that arbitrary ones.



Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
19
prefix
26
Yes
?
Unknown
9
Yes
?
Unknown
6
prefix
On gradients' color stops
19
prefix
27
Yes
?
Unknown
9
Yes
?
Unknown
6
prefix

Mobile

FeaturesAndroidFirefox MobileIE MobileOpera MobileSafari Mobile
Basic support
?
Unknown
4.0
prefix
16.0
Yes
?
Unknown
?
Unknown
?
Unknown
On gradients' color stops
?
Unknown
19.0
Yes
?
Unknown
?
Unknown
?
Unknown

Examples

View live exampleThis is an example of how can you use calc in CSS

CSS

/* CSS calc function example */
 
.header {
     position:relative;
     margin: 0px auto;
     width: 80%; /* fallback for browsers without support for calc() */
     width: calc(100% - 100px); /* CSS3 compliant implementation; Firefox 16 and IE 9, and above */
     border: solid black 1px;
     box-shadow: 5px 5px #999;
     margin-top: 40px;
     padding: 10px;
     text-align: center;
}
 
.header:hover {
     width: calc(100% / 3 - 2 * 1em); /* complex calculation on hover */
     width: 25%; /* fallback */
}

Notes

If you divide by zero it will cause an error in the HTML parser. Also the return value that will be computed must comply within the range of the relevant CSS target. For example width or height cannot be negative so it will be reverted to 0;


Related specifications

Specification Status Related Changes
W3C CSS Values and Units Module Level 3: Mathematical Expressions: "calc" Candidate Reccomendation