CSS calc function for numeric values

CSS calc() function allows expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values. It can be used wherever length, frequency, angle, time, number, or integer values are allowed. One can also have calc expression within calc.

calc values

Note that whitespace is required on both sides of the + and – operators. Some valid calc values are

  • calc(100% – 100px)
  • calc(100%/3 – 2*1em – 2*1px)

Fallback value

In case you are using calc function to define a property (say width), it may be a good idea to define a fallback width value in case browser does not support calc function. The fallback value should come before main value.

width: 95%;
width: calc(100% - 100px);

Example – css calc function

In the following code, CSS property width can be changed to the following values
  • 100px
  • calc(100% - 100px)
<style type="text/css">
.box {
  width: 100px;
  height: 100px; background-color:lightgreen;
}
</style>
<div class="box">
  some text
</div>
width refresh

Specification and Browser compatibility

SpecificationStatusCategories
calc() as CSS unit valueW3C Candidate RecommendationCSS3
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 26+ Yes 16+ Yes 10+ Yes 12+ Yes 6.1+ Yes 15+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 7.0-7.1+ Yes 10+ Yes 33+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments