New ways with math functions

Meet the friends min(), max(), and clamp(). Three less used properties that can make your coding life easier.

In the era of evolving responsive design, we have gone through different approaches to handle it in the best way we can, often with the help of media queries. Now, we have container queries as the next step in evolving the potential in responsive web design (more on this topic in a future article). Additionally, we have gained increased control with some powerful CSS functions that are supported in all modern browsers and that is what this vibe is about.

Meet the friends min(), max(), and clamp(). With these functions at your disposal, you don’t always have to rely on fixed viewport breakpoints. It’s possible to create a more fluid experience, and min, max, and clamp can help along the way. I hope I can inspire you to come up with your own use cases that can be helpful. But first.

What are min(), max(), and clamp()?

They, along with calc(), are math functions that allow addition, subtraction, multiplication, and division to be used as values for a component.

min() and max()

For both min() and max(), you can provide a list of arguments, and the browser calculates which one is the best fit.

The min() function sets the smallest value from a list of expressions as the value. It can be used in many different cases, such as length, angle, percentage, and frequency. You can use different units for each value if you like. So, what can this look like in the real world of code?

.container {
  width: min(1em, 40vw, 800px);
}

In this case, the width of the container will end up as whatever the browser determines is the smallest value. It’s like you had a value for width, min-width, minier-width, miniest-width, even-smaller-width. You get the point…

As for max(), it works in the same way.

.container {
  padding: max(1.5rem, 40vw - var(--contentWidth) / 2);
}

Above it will select the maximum value of the two. Because max() is a math function you can use calculation inside the max function as well. Pretty neat right?

clamp()

This function takes three values: a minimum allowed value, a preferred value, and a maximum value. In the example below, we are using clamp() for typography. This allows the font to adjust according to the viewport width but with thresholds for both how small the font can be and, at the same time, a maximum value for the highest threshold. This creates a responsive heading without the need for media queries. At the same time it’s great way to work with accessible headings when the user adjust the settings for font-size in the browser or on device.

h2 {
  font-size: clamp(2rem, 6vw, 4rem);
}

To wrap it up

To give you an visual exemple of what it looks like I created a codepen, feel free to play with it!

See the pen (@jessicaskarbratt) on CodePen.

The CSS math functions min(), max(), and clamp() are very powerful and well supported. They can be quite helpful when you’re building responsive web applications, as they can be used for width, height, font-size, line-height, padding, margin, and more.

I hope this was helpful, and that you’re eager to get started.