Calc() - Function CSS

Description of the calc() function.

The function calc() performs a calculation whose result can be used as the value of a property. The calculation can involve the four basic operations, include parentheses, or use other fonctions mathématiques or fonctions trigonométriques.
The four basic operators are:
    +: addition,
    -: subtraction,
    *: multiplication,
    /: division.

Calculations are performed according to the usual order of priority:
    - First, calculations within parentheses,
    - Next, multiplications and divisions,
    - Finally, additions and subtractions.

The function calc() can also call the function var() , which provides the interesting possibility of inserting the value of a variable into the calculation.

The expression to be calculated can mix units, which is not correct mathematically but is quite practical in our case. However, the expression must remain consistent: you can add or subtract different units as long as they correspond to the same type of physical quantity; for example, it is possible to add pixels (px) and centimeters (cm), but not pixels and angles (deg).
Multiplications and divisions must include at least one operand without a unit.

The result of the expression must be of a type that matches what the property expects. For example, the width property expects a dimension, so the calculated expression must return a dimension if it is used with this property.

Examples of correct expressions:

Examples of incorrect expressions:

Note: spaces before and after the + and - operators are necessary for the expression to be evaluated correctly. Without spaces, the + and - operators are considered to be the sign of the value that follows them.
The * and / operators can be written without spaces, either before or after.

Improve CSS code readability.

calc() can be used simply to make the author's intentions clearer. For example, if you want to rotate an element by 1/12 of a turn, you can write rotate:30deg;, but the syntax rotate:calc(1turn / 12); better highlights the fact that it is a rotation of one twelfth of a turn.

calc() and the colors.

Currently, the function calc(), when used alone, cannot calculate with colors, but by using functions like rgb() or hsl(), it is possible to perform calculations on each component of a color.
Example:
color:rgb(calc(255 - 41), calc(255 - 120), calc(255 - 18));

The calc() value can be used with the following properties:

• Instead of any numeric value, provided that there is a match between the type expected in that place and the type of the result obtained by the function calc().

Syntaxes of the calc() function.

• property: calc(75% + 30px);

  The function calc() accepts any combination of values and algebraic operators ( + - * / ). The operators + et - must be preceded and followed by a space (they should not be attached to the value before or after them).

• property: calc(2 * min(300px, 30%, 500px));

  Other calculation functions can be inserted into the expression provided to calc().

Examples of use of the function calc().

Position a gradient.

The example below shows an element with a linear gradient on its right and left sides. We wanted this gradient to be 10 pixels wide, regardless of the total width of the element.

Calculation of the placement of elements in fixed or absolute position.

Centering a block positioned absolutely (position:absolute;) or fixed (position:fixed;) is not easy because the block's position no longer depends on its margins, but only on its four properties top, right, bottom, and left.

The blue block with the word "Example2" has been positioned absolutely. Yet it still remains centered in the width of the browser window. Observe how the value for its left property was determined with calc().

Vertical alignment.

As for the pink block (example3), positioned fixed on the left side of the screen, it remains vertically centered, thanks to the use of the function calc() and the vh (Viewport Height) unit.

Simulator.

The simulator adjusts the image width using the calc() function. The last option allows you to enter a formula yourself.

Browsers compatibility with calc() function.

The calc() function is now well supported by browsers.

Notes:

(1) The calc() function is bugged in Internet Explorer.

1

calc()
function
 

2

Nested
calc()
functions

3

calc()
function
in @media

Estimated overall support.

96%

95%

95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

1

KaiOS Browser

Samsung Internet

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

Chrome

Opéra

Opéra Mobile

UC Browser pour Androïd

Firefox pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

Browsers compatibility with calc() function.

• CSS Values and Units Module Level 3

  Regarding calc(). First presentation of the calc() function, introducing the possibility of evaluating mathematical expressions in CSS.
  

  July 13, 2001

  Working Draft.

  

  August 28, 2012

  Candidate Recommendation.

  

  

• CSS Values and Units Module Level 4

  Regarding calc(). No change to the calc() function.
  

  August 14, 2018

  Working Draft.

  

  

  

• CSS Values and Units Module Level 5

  Regarding calc(). No change regarding the calc() function.
  

  September 03, 2024

  Working Draft.

  

  

  

See also: other calculation functions.

The calculation functions available in CSS are becoming increasingly numerous. They cover common mathematical and trigonometric calculations. Here is the list to make your search easier. You can also refer to the W3C specification CSS Values and Units Module.

Properties:

⚠

interpolate-size

Determines whether animations or transitions should be abrupt or gradual when a keyword defining an intrinsic dimension is used.

Functions:

abs()

Calculates the absolute value of a number.

acos()

Calculates the angle at which the cosine is equal to the specified value.

asin()

Calculates the angle at which the sine is equal to the specified value.

atan()

Calculates the angle whose tangent is equal to the specified value.

atan2()

Calculates the angle between the x-axis and the line connecting the origin point to the specified point.

attr()

Returns the value of an attribute (standard or custom) from HTML or XML code.

Calc()

Performs a calculation. Can be used in place of a value for a property.

⚠

calc-size()

calc-size() allows calculations on the intrinsic dimension of an element (defined by the content).

clamp()

Calculates a value between two extreme values. This function is useful when the units of the parameters are different but of the same type (dimensions, angle...).

cos()

Calculate the cosine of an angle.

exp()

Calculates the exponential of a number.

hypot()

Calculates the square root of a sum of squares of numbers.

⚠

if()

This function allows you to select a value from a proposed list, each value being associated with a condition.

log()

Calculates the logarithm of a number.

max()

Determines the largest value among a series of values.

min()

Determines the smallest value among a series of values.

mod()

Calculates the remainder of the integer division between two numbers.

pow()

Calculates a power boost.

rem()

Calculates the remainder of the integer division between two numbers.

round()

Calculates the rounding of a number.

⚠

sibling-count()

Returns the number of siblings of the element in the document tree, including the element itself.

⚠

sibling-index()

Returns the index of the element among its siblings, that is, among the other elements that have the same parent.

sign()

Determines the sign of a number.

sin()

Calculate the sine of an angle.

sqrt()

Calculates the square root of a number.

⚠

src()

Specifies the address of a resource such as an image for example. Synonym of the url() function.

tan()

Calculates the tangent of an angle.

url()

Specifies the address of a resource such as an image for example.

Values: