Using calc() calculate values in css

calc() function is a good feature of CSS. For arithmetic calculations in CSS it is used. You can use it for percentages and pixels also. In IE9 towards it works also.

This is a native CSS way for doing simple math in CSS which is a replacement for any length value. It has four simple math operators i.e. add (+), subtract (-), multiply (*), and divide (/). It is quite interesting to calculate value in CSS rather than doing math in code.

Read Also: Apply CSS to half of a character

On desktop it supports on IE 9+, Safari 6+, and won’t be in Opera until it is on present in 15+ atleast. On mobile, it supports on Android and Opera Mini don’t support it at all yet and iOS just on 6.0+.

CALC() EXAMPLE:

<div class="divc">
    <p>This div has 10px on either side.</p>
</div>

.divc{
    width: calc(100% - 20px);
    text-align:center;
    margin: 0 auto;
    padding:25px 0;
    color:#000;
}

For more details click here.

Perhaps you could even use this to do a fancy things with the <progress> elements like turning it into a speedometer like.