---
# System prepended metadata

title: CSS Comparation functions
tags: [css]

---

# CSS Comparation functions
###### tags: `css`
Regarding the [The state of CSS 2021](https://2021.stateofcss.com/en-US/), css comparation functions won [the most adopted feature award](https://2021.stateofcss.com/en-US/awards), 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