Day 33: Mathematical expressions in min(), max(), clamp()

This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

You can use full math expressions in the comparison functions min(), max(), and clamp(). There’s no need to nest a calc() function inside.

Writing…

div {
  border: max(20px, calc(1vw + 10px)) solid;
}

…is the same as writing…

div {
  border: max(20px, 1vw + 10px) solid;
}

You can also use custom properties.

.var {
  --extra: 10px;
  
  border-width: max(20px, 1vw + var(--extra));
}

Complex expressions are also possible.

div {
  width: clamp(50px * 4 * 1.5, (100% / 2) * 2, 400px * 2);
}

This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

Print Share Comment Cite Upload Translate Updates

APA

Manuel Matuzović | Sciencx (2022-11-09T09:38:54+00:00) Day 33: Mathematical expressions in min(), max(), clamp(). Retrieved from https://www.scien.cx/2022/11/09/day-33-mathematical-expressions-in-min-max-clamp/

MLA

" » Day 33: Mathematical expressions in min(), max(), clamp()." Manuel Matuzović | Sciencx - Wednesday November 9, 2022, https://www.scien.cx/2022/11/09/day-33-mathematical-expressions-in-min-max-clamp/

HARVARD

Manuel Matuzović | Sciencx Wednesday November 9, 2022 » Day 33: Mathematical expressions in min(), max(), clamp()., viewed ,<https://www.scien.cx/2022/11/09/day-33-mathematical-expressions-in-min-max-clamp/>

VANCOUVER

Manuel Matuzović | Sciencx - » Day 33: Mathematical expressions in min(), max(), clamp(). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/11/09/day-33-mathematical-expressions-in-min-max-clamp/

CHICAGO

" » Day 33: Mathematical expressions in min(), max(), clamp()." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/11/09/day-33-mathematical-expressions-in-min-max-clamp/

IEEE

" » Day 33: Mathematical expressions in min(), max(), clamp()." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/11/09/day-33-mathematical-expressions-in-min-max-clamp/. [Accessed: ]

rf:citation

» Day 33: Mathematical expressions in min(), max(), clamp() | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/11/09/day-33-mathematical-expressions-in-min-max-clamp/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.