Day 32: the clamp() function

posted on

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.

The clamp() function defines a minimum value, a preferred value, and a maximum value.

A quick recap of min() and max() before we talk about clamp():

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.

div {
  width: min(90%, 700px);
}
700px or less with no min-width

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.

div {
  width: max(300px, 90%);
}
300px or more with no explicit max-width

If we want to define a default value and both a minimum and maximum value, we could do this:

div {
  width: max(300px, min(90%, 700px));
}
90% with 300px min-width and 700px max-width

The 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 700px or 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().
clamp() takes three parameters, a minimum value, a preferred value, and a maximum value.

div {
  width: clamp(300px, 90%, 700px);
}
90% with 300px min-width and 700px max-width

The 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:

div {
  width: 90%;
  min-width: 300px;
  max-width: 700px;
}

See on CodePen

Further reading

Do you want to learn even more awesome CSS?

I'm running a workshop with my friends at Smashing Magazine in which I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.

Learn more about the workshop!

Overview: 100 Days Of More Or Less Modern CSS