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

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 wri…


This content originally appeared on Manuel Matuzović - 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);
}

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

Manuel Matuzović | Sciencx (2022-11-09T00:00:00+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-2/

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-2/
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-2/>
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-2/
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-2/
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-2/. [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-2/ |

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.

Related Posts