CSS Comparition functions

Regarding the The state of CSS 2021, css comparation functions won the most adopted feature award, so what are css comparation functions?

The css comparation functions help we compare mutiple values and apply of the values when they’re avaluated.

clamp()

• clamp a value between an upper and lower bound.

• clamp(min, value, max) = max(min, min (value, max))

• Syntax

  font-size: clamp(1rem, 2.5vw, 2rem);
  font-size: clamp(1.5rem, 2.5vw, 4rem);
  font-size: clamp(12px, 1rem + 2vw, 18px);

max() and min()

• These functions allow you to select either the maximum or minimum value from a range of values you provide.

• Syntax:

  width: max(500px, 50%);
  width: min(320px, 90%);

Browser compatibility

• https://caniuse.com/css-math-functions