Mathematical functions.

Mathematical calculation functions in CSS.

Main calculation functions.

Determination or change of sign:

• abs() : Calculates the absolute value of a number.
• sign() : Determines the sign of a number.

Exponential and logarithmic calculation functions:

• sqrt() : Calculates the square root of a number.
• exp() : Calculates the exponential of a number.
• pow() : Calculates a power boost.
• log() : Calculates the logarithm of a number.
• hypot() : Calculates the square root of a sum of squares of numbers.

Searching for extreme values:

• min() : Determines the smallest value among a series of values.
• max() : Determines the largest value among a series of values.
• 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...).

Rounding calculations:

• round() : Calculates the rounding of a number.
• mod() : Calculates the remainder of the integer division between two numbers.
• rem() : Calculates the remainder of the integer division between two numbers.

Trigonometric calculation functions:

• sin(), cos(), etc.. See also the trigonometric functions.

Expression evaluation:

• calc() : Performs a calculation. Can be used in place of a value for a property.
• var() : Retrieves the value of a custom property (variable).

See also the trigonometric functions and predefined mathematical values pages.

These features can be used with:

These functions can be used with any properties that expect a numeric value, or be part of an expression evaluated by the calc() function.

However, be careful with the type matching: the type of the value returned by the function must match the data type awaited by the property. CSS is pretty strict on data types: for example, an integer numeric value like 200 is not interchangeable with the 200px dimension.

Syntax of mathematical calculation functions.

• <propriété>: abs(200px); a

  Calculate the absolute value of the number a. The returned value is of the same type as the a value. In our example, the value a is a dimension (expressed in pixels), so the result of the function will also be a dimension, and can be used with all properties that expect a dimension.

• <propriété>: exp(200); a

  Calcule e to the exponent a. In other words, this function is equivalent to pow(e,a).
  e and a must be unitless numbers. The result of the function is also unitless.

• <propriété>: hypot(200px, 150px, ...); a b

  The hypot() function expects a series of values, which can be unitless or with a unit, but all units must be of the same type (as dimensions for example).

  hypot() (short for hypotenuse) calculates the square root of the sum of the squares of its arguments. For example, hypot(3px, 4px) is sqrt(3px² + 4px²); i.e. 5px.

  If only one value is provided, the syntax is correct but hypot() only returns the absolute value, that is, gives the same result as abs().

  If two values are provided, hypot() calculates the length of the hypotenuse of a right triangle whose sides measure dimensions a and b, respectively. If more values are provided, the calculation is the same, but on figures with 3, 4 or more dimensions.

  

  Example of use.

  This row of trees was obtained by shifting the 2nd and 3rd trees more or less to the right and upwards. This is easy to achieve with the translate property. Nevertheless, the effect is not convincing because, in order to recreate perspective, The size of trees should decrease according to their distance.

  

  Reducing the size of trees is easy with the scale property, but the reduction coefficient must be proportional to the size of the distance from which the tree was moved. The hypot() function simplifies this calculation.

  

  Here we show you a simulation because few browsers handle the hypot() function, but here's what would be the styles to achieve this. The number 8 was chosen empirically.

  #arbre2 { translate:5px -10px; scale:calc(8 / hypot(5px, 10px); } #arbre3 { translate:20px -20px; scale:calc(8 / hypot(20px, 20px); }
• <propriété>: log(200); <propriété>: log(200, 3); a b

  Calculate the logarithm of a in base b. If b is omitted, the function calculates the logarithm of a at base e.
  The two numbers a and b must be specified without a unit. The result is also unity-free.

• <propriété>: pow(200, 2); a b

  Calculates a raised to the power of b.
  For example, exp(2,3) returns 8.
  a and b are numbers without unit. The result of the function is also a number unitless.

• <propriété>: sign(200px); a

  Returns -1 if the value a is negative, 1 if a is positive, or returns 0 if a is 0.
  The value a can be of any numerical type; In our example, this is a dimension.

  The sign() function considers the calculated value, which can yield surprising results if the value is specified with a relative unit such as the percentage. For example, 50% is indeed a positive value but can, after calculation, give a negative result.

• <propriété>: sqrt(200); a

  Calculate the square root of the number a.
  a is a positive number, with no units, as is the result calculated by sqrt().

Simulator.

This simulator is especially interesting for identifying the mathematical functions recognized by your current browser.

Of course, there must be a match between the type of value expected by the property and the type of value returned by function. For example, trigonometric functions such as sin() or cos() return a number unitless between 0 and 1: these functions can be used for example with the scale that expects a unitless value.
For this reason, the simulator uses three properties: width which expects one dimension, scale for numbers without units, and rotate for functions that return an angle.

Support for mathematical functions by browsers.

Mathematical functions are now well recognized by browsers. There are still some problems with sign() and clamp() but which should be solved quickly by browsers.

The tables below are very general. Refer to the calc() and var() functions for more details on their degree of compatibility with browsers.
See also the compatibility of trigonometric functions.

General calculation functions.

Notes:

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

1

calc()
function

2

var()
function

3

abs()
function

4

sign()
function

5

min() max()
and clamp()
functions

Estimated overall support.

96%

96%

79%

79%

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

Caniuse

Caniuse

Exponential calculation functions.

1

exp()
function

2

sqrt()
function

3

pow()
function

4

log()
function

5

hypot()
function

Estimated overall support.

89%

89%

89%

89%

89%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Chrome

Edge

Safari

Opéra

Firefox

Chrome pour Androïd

Safari sur IOS

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

Caniuse

Caniuse

Rounding calculation functions.

1

mod()
function

2

rem()
function

Estimated overall support.

88%

87%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Chrome

Edge

Safari

Opéra

Firefox

Chrome pour Androïd

Safari sur IOS

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

History of CSS computational functions.

• CSS Values and Units Module Level 4

  Many mathematical or trigonometric calculation functions are introduced in this level 4 of the specification.
  

  August 14, 2018

  Working Draft.

  

  

  

See also: Other calculation functions.

The computational functions available in CSS are more and more numerous, covering the usual mathematical and trigonometric calculations. Here is the list to facilitate your research. You can also refer to the specification of the W3C: 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:

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: