CSS function min(), max(), clamp()

CSS is a style language, but it allows you to write functions like any other programming language. The main difference is you cannot make your own functions. CSS functions are used as a value for various CSS properties. You probably already came across some CSS functions. Here is a common one used for setting colors:

rgb(255,255,255)

In this topic, you will learn about three different CSS functions: min(), max(), and clamp(). Let's get started.

CSS function min()

The min() is a CSS function that lets you set the most negative or the smallest value from the list of comma-separated expressions as the value of a CSS property value. You can use this value wherever these elements are allowed:

• <length>

• <frequency>

• <angle>

• <time>

• <percentage>

• <number>

• or <integer>.

These expressions can be anything from math to literal expressions or others such as attr(). Think of the min() value as providing the maximum value a property can have. For instance, let's say you want to decrease your image size along with your viewport width, but you still want a specific max value, you can use this function. Let's see the example down below:

img{
    width: min(20%, 700px);
}

Here, your maximum value will be 700px. The image will be smaller after you surpass 20% of viewport:

One more important thing is that the min() function lets you use different units for each value in your expression. You can also use parentheses to establish computation order when needed.

Let's look at the example:

In the first example, the width will be 200px at most, but it will be smaller if the viewport is smaller than 400px. That is because the first value is set to 50vw. The first value tells you that 1vw is 4px, and in this case, you have 50vw meaning the second value is 200px.

CSS function max()

On the other hand, we have the CSS function max(). The CSS function max() lets you set the most positive or the largest value from the list of comma-separated expressions as the value of a CSS property value. You can use this value with the same elements listed above as with the CSS function min().

Here the same principles that apply to the CSS function min(), apply to the CSS function max(). In the example down below you will see the main difference between the CSS Functions min() and max(). Think of the max() value as providing the minimum value a property can have. For instance, let's say you want to increase your image size along with your viewport width, but you still want a specific min value, you can use this function. Let's see the example down below:

img{
    width: max(50%, 300px);
}

Here, your minimum value will be 300px until you stretch the viewport up to 50%. After that it will get bigger just like shown in the example below:

Let's look at the example:

In the first example, the width will be at least 400px, but it will be wider if the viewport is more than 2000px. That is because the first value is set to20vw. The first value tells you that 1vw is 20px, and in this case, you have 20vw meaning the second value is 400px.

CSS function clamp()

The CSS function clamp() lets you clamp a middle value within a range of values between a defined minimum bound and a maximum bound. Unlike the max() and min() functions, the clamp() function takes three parameters: a minimum value, a preferred value, and a maximum allowed value. Here is the syntax with the parameters for the clamp() function:

clamp(min, val, max)

The clamp(min, val, max) function accepts three comma-separated expressions as its parameters. As you can see, the clamp() function is a short way of setting the smallest and the largest value of the element. Here is why:

• min is the most negative or the smallest value from the list of comma-separated expressions as the value of a CSS property value,

• val is the preferred value for the expression whose value will be used as long as the result is between the minimum and maximum values,

• max is the most positive or the largest value from the list of comma-separated expressions as the value of a CSS property value.

The same rule applies to the clamp function. You can use different units for each value in your expressions and different units in any math function making up any of the arguments. Expressions can be math functions, literal values, or other expressions that evaluate to a valid argument type or nested min() and max() functions. For math expressions, you can use addition, subtraction, multiplication, and division.

Let's look at the example below:

The clamp function allows the font to grow as the viewport grows, but it will grow only from the smallest to the largest value that you set.

Conclusion

In this topic you've learned about three different CSS functions: min(), max(), and clamp. You've learned how to use them and what are the main differences between them. So, let's put it to the test!