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

posted on 09.11.2022

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

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);
}

See on CodePen

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

Further reading