CSS Comparison Functions: Clamp(), Min() And Max()

In CSS to make a responsive/fluid layout, we use viewport or relative length units. But this viewport comes with the disadvantage that if you these viewport lengths, there’s a possibility that elements will look odd. Moreover, suppose we have used viewport (vw) as a font size unit. Then, if the viewport becomes very small then font size has no use. Earlier, we used Media Query and Calc () functions to overcome the above problem. But in modern CSS, we have comparison functions clamp(), min() and max () to create this kind of flexible layout with a very little amount of code. Let’s discuss clamp(), min(), and max() with coding examples, which browsers they support, and their core differences.

What is CSS Comparison Functions clamp(), min() and max()?

CSS Comparison functions are used to make very responsive/fluid layouts with a very little amount of coding. It reduces the number of lines of code and thus saves a lot of time. CSS comparison functions include clamp(), min() and max(). They can be used to set the upper and lower limits for a particular element. Then we can pass the values of actual size to the function, and then it compares them and apply calculated value to the property. They can take direct values as well as mathematical expressions as their parameters. They just compare multiple values and then represent them based on the type of function used. Let’s see the definition of the clamp(), min(), and max() as given in the CSS Values and Units Module Level 4:

• min(): It let’s you set the smallest value from the provided values which are separated by commas as the value of CSS property.
• max():It let’s you set the largest value from the provided values which are separated by commas as the value of CSS property.
• clamp():It allows you to select a middle value within range of values between defined minimum and maximum.

What is Clamp() Function?

It takes three values as its parameters, minimum value, a central value, and maximum value. The value that will be returned as property value will always be between a minimum value and maximum value. It calculates the value of the property based on the central value parameter. If the calculated value lies between min and max then the central value is assigned as the property value. Else if a value is less than the minimum value then the minimum value is assigned and if exceeds the maximum value, then max value is assigned. If we are passing mathematical expressions as arguments, then no calc() function is required.

Consider the example below:

.element {
   width: clamp(500px, 50vw, 800px);
 }

Here, 500px is minimum value, 50vw is central or preferred value and 800px is maximum value.

Here, 50vw is central value that means it will be only applied if value is between 1000px and 1600px. If value will be less than 1000px then 500px will be assigned and if greater than 1600px then 800px will be assigned.

What is min() function?

The min() function has many comma-separated values as its parameter and it assigns the minimum value of them to the property. It can be used to set a maximum boundary limit of the property value. For example, consider the code below:

.element {
   width: min(50vw, 800px);
 }

Here, the above code ensures that the value will not exceed 800px. If the vw value will be less than 1600px then it will be assigned or otherwise, 800px will be assigned.

Here, the vw value will be 1600px (as 50vw is provided) and so ultimately 800px will be assigned to the property.

What is max() function?

The max() function has many comma-separated values as its parameter and it assigns the maximum value of them to the property. It can be used to set a minimum boundary limit of the property value. For example, consider the code below:

.element {
   width: max(50vw, 800px);
 }

Here, the above code ensures that the value will not be less than 50vw. If the vw value will be greater than 1600px then it will be assigned or otherwise, 800px will be assigned.

Here, the vw value will be 1600px (as 50vw is provided) and so ultimately 1600px will be assigned to the property.

Difference between clamp(), min() and max() functions

The clamp(), min() and max() are all CSS comparison functions for creating flexible and fluid layouts of websites. The main advantage of all three functions is that they all do not require calc() function if we write mathematical expressions as their parameters. For example, consider the code below:

.type {
   font-size: clamp(25px, 20* (2vw+2vh)/2, 200px)
}

The main difference that lies between these three functions is the number of parameters they take and the kind of value they assign to the property based on those values.

clamp() function takes three parameters only i.e. minimum, central and maximum. It can be used to set the value to be assigned as a minimum, maximum or central. Whereas, min() and max() take any number of arguments and assign the minimum and maximum values out of them to the property. They can be used to set the maximum and minimum boundaries of property values respectively. For example, consider the examples below for clamp(), min() and max() respectively:

#for clamp()
.element {
   width: clamp(400px, 50vw, 600px);
 }

#for min()
.element {
   width: min(50vw, 600px);
 }

#for max()
.element {
   width: max(50vw, 600px);
 }

Here, the values assigned to properties by different functions for particular ranges of value is as below:

Range	clamp()	min()	max()
800px-1600px	50vw	600px	Variable
<800px	800px	Variable	Variable
>1200px	600px	600px	50vw
<1200px	Variable	50vw	600px

 Here, in the above table Variable denotes that the values will depend on the original value of the input.

The other factor for comparison is the browser supports for clamp(), min() and max() which are depicted below that shows that they are same for min() and max() function but differs for clamp() function:

What do you think CSS comparison functions are better than Media Query? Tell us in the comments below!!