UI Development

CSS Comparison Functions (min(), max(), clamp())

Traditionally, to build responsive layouts we have used relative length units. In that way the element size depends upon the other element or the viewport width or viewport height, if we use that the growing and shrinking of element sizes looks odd after an extent. Consider an example where we have used vw(viewport width) as font-size, the font size of the element becomes illegible if the viewport gets too small. To overcome these types of issues we use media queries or different calc() methods. To overcome these issues the comparison functions will help us to reduce the lines of code and save developer time. Functions like min(), max() and clamp() can be used to set upper and lower limits, compute them and then compare the values of the arguments passed to the function, and apply the calculated value to the property.

Comparison functions min(), max() and clamp() can take direct values or also the mathematical expressions as the arguments.

CSS Comparison Functions:

CSS comparison functions are all about comparing multiple values and then representing them based on the function used. Now let’s explore them.

The Min() Function:

The min() function contains one or additional comma-separated calculations and represents the smallest of them. we tend to use the min() to set the maximum value.

Consider the subsequent example. we would like the component to possess a maximum width of 500px.

The browser needs to opt for the minimum of the values (50%, 500px). selecting that depends on the viewport width. If 50% of computed width is more than 500px, then it’ll be ignored and 500px are going to be used instead.

Otherwise, if the 50% computes to a value less than 500px, then the 50% is going to be used as the value of the width. The 50% of X = 500px. The viewport width is 1000px.

The Max() function:

The max() function contains one or additional comma-separated calculations and represents the greatest of them. we tend to use the max() to set a minimum value.

Consider the subsequent example. we would like the component to possess a minimum width of 500px.

The browser needs to opt for the largest of the two values (50%, 500px). selecting that depends on the viewport width. If 50% computes to a less worth than 500px, then it’ll be ignored and 500px are going to be used.

Otherwise, if the 50% computes to a value more than 500px, then the 50% is going to be used as a worth for the width. It’s the other way of min() function.

The Clamp() function:

The clamp() function clamps a value between two defined values, i.e. minimum and maximum. The clamp() function takes three parameters (min value, preferred value, max value).

Consider the following example.

In this example, We have a block with a maximum width of 1000px, a preferred value of 50%, and a minimum value of 200px.

What we have learnt:

  • The width won’t go above 1000px
  • If the viewport width is more than 400px and less than 2000px, then the central (preferred) worth is 50% and can solely work.
  • The width will never go below 200px

The clamp() function is very much similar to the physical clamp tool we have. Based on two provided values at the edges (min, max), It clamps the value.

Once clamp() is used, it’s such that we are using both, max() and min() functions. Take into account the below example:

The 50% value depends on the browser viewport width. Now, let us assume that the viewport width is 1200px.

Based on the context, the dependent value is calculated. It can be a %, em, rem, vw/vh. We can even the percentage value that can be either based on the viewport width in case it could be based on its parent or the element is directly in the <body>.

It’s value mentioning that mathematical calculations square measure out there therefore there’s no got to use calc(). As per the spec:

Full mathematical expressions are allowed in every of the arguments. There’s no need to nest a calc() inside. If we have multiple constraints to apply, We can also provide more than two arguments.

Browser Support:

CSS Comparison Functions (min(), max(), clamp()) become supported in Firefox and they’re currently supported altogether by major browsers. Those CSS functions can be offered with ways to possess dynamic layouts and additional versatile style parts. The first factor i would like to focus on is browser support since this is often a replacement factor. The support for min and max is equal:

 

And here is that the support for clamp():

What CSS Comparison Functions Will Change In How We Tend to Design?

It’s usually that the designer works on the mobile and desktop sizes once coming up with a web page. What’s the impact of getting comparison functions today?

We can see it below:

The first one shows the present manner we’re coming up with, there are unit clear spots for the look sizes or viewports. However, the other is gradual that indicates the utilization of a minimum and maximum for a style property. I imagine that designers within the future can do one thing like this:

Use Cases:

In this blog we will look into some of the use cases which are listed below.

Sidebar And Main:

Usually, the sidebar of a page encompasses a fixed width and therefore the main dimension is versatile. We will enhance the sidebar and build it additional dynamic and occupy more room if the viewport is massive enough. To attain that, we would like to line a minimum dimension for using max() operate.

Consider the below example:

The aside minimum dimension is 150px, and it’ll be 30vw if the viewport dimension is bigger than 500px (500 * half-hour = 150).

Headings Font Size:

A great use case for clamp() is for headings. Suppose that you simply need a heading with a minimum size of 16px, and a maximum size of 50px. The clamp() operation will give us an in-between value without going below or over the minimum and maximum, respectively.

Using clamp() here is ideal as a result of it ensures that the font size used is accessible and straightforward to browse. If you may use min() to line maximum font size, then you can’t control the font on small viewports.

See the figure below for a visual:

On a mobile viewport, the font size is little. For that reason, don’t use min() operate just for the font size. Of course, you’ll be able to cancel or add it with a media query, on the other hand you lose the entire purpose of victimisation CSS comparison functions. We can nest a min() within a max() operation, which is able to mimic the clamp() operation.

But this may cause accessibility issue when you zoom in the browser.

We have added (1rem + 5vw) that may fix the matter.

Decorative Headings:

Based on the viewport size, that is a decorative text that should scale. max() function can be used with CSS viewport units to set a minimum value for it.

Dynamic Margin:

We can have a dynamic margin between style components by using CSS viewport units. since the user might view the design from a rotated screen with a long vertical height, this might not be a good solution. We can do it with media queries.

We can replace it with a one liner code:

Here, we set a maximum value for the margin 2.75rem that shouldn’t be exceeded by using min().

Container Width:

Suppose, we have a container that should not take width more than 80% of its parent and shouldn’t exceed width more than 780px. Traditionally, we used to do it like this:

Now, we can replace this with a one liner code by using min().

Conclusion:

By going through the blog we have gained a brief idea of how and where exactly to use the CSS Comparison Functions (min(), max(), clamp()) and also explored some of the use cases.

Thank you for going through the entire blog. I hope you will have a better understanding of CSS Comparison Functions (min(), max(), clamp()) now.

About The Author