Day 32: the clamp() function
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.
clamp() function defines a minimum value, a preferred value, and a maximum value.
A quick recap of min() and max() before we talk about
We can use the
min() function to define a maximum value for a property. It's the maximum value we define because in the list of provided parameters,
min() will always pick the smallest value. For example,
width: min(700px, 90%) is always 700px or less, which means that the maximum width is 700px.
width: min(90%, 700px);
We can use the
max() function to define a minimum value for a property. It's the minimum value we define because in the list of provided parameters,
max() will always pick the largest value. For example,
width: max(300px, 90%) is always 300px or more, which means that the minimum width is 300px.
width: max(300px, 90%);
width: max(300px, min(90%, 700px));
max() function picks the largest value, either
300px or the result of the
min() function if it's larger than
300px. This defines the minimum width. The
min() function picks the lowest value, either
90% if it's less than
700px. This the defines the maximum width with
90% as the default value.
Since nesting functions is super complicated and my brain still hurts from writing this paragraph, there's a handy alternative for this,
clamp() takes three parameters, a minimum value, a preferred value, and a maximum value.
width: clamp(300px, 90%, 700px);
width of the
<div> is 90% with a minimum width of 300px and maximum width of 700px. It's basically a shorter way of writing:
See on CodePen.