Functions like CSS, min, and max can revolutionize web layout features. However, they also can make CSS hard to reason about if used to their full potential.

Join us in our newest publication:

The functions

min(): lets you set the most negative value from a list of comma-separated expressions as the value of a CSS property value

max(): lets you set the most positive value from a list of comma-separated expressions as the value of a CSS property value

Another interesting note is that you could do math inside the function without using calc. So, in place of min(calc(5vw + 5px), 50px); you could just do min(5vw + 5px, 50px). Of course, you may also have achieved your calculation in a variable and used that variable.

One factor that is probably confusing is the naming CSS min() returns the minimum value from its list of values, and max() returns its maximum value, as you may count on. However, what might show up if I were to do the subsequent (a ridiculous usage for the motive of the instance):

width: min(1px,200px,300px);

Of course, 1px returns, which means that the output of the CSS min function sets the maximum value of that width to be 1px.

An occasional point of bewilderment when the usage of min()/max() in which you use most () to impose a minimum value on something.

For instance, properties like min-width efficiently use max()) and min() to impose a maximum on something; it’s easy to accidentally attain for the other feature and try to use min() to add a minimal size.

See also: 4 Ways CSS Can Improve Your SEO

CSS Breakpoints

You could add CSS breakpoints using min-width, max-width, or both aggregate.

By default, we might be setting the patterns for small screen devices and later upload & modify them for larger monitors.

Likewise, we should use max-width breakpoints to design our layout for big-screen devices. We’d set the patterns for big-screen gadgets and later upload & adjust for smaller monitors by default.

Min-content keyword

The W3C specs state the min-content material is the most petite length a field can take without overflowing its content material.

For horizontal content material, the min-content material uses the period of the broadest little bit of content material in the element box and routinely units that length price because of the width.

If we revisit the container instance above, we can apply the min-content to the container element like so:

Max-content keyword

The W3C specs state that max-content represents a box’s best size with an infinite available area on a given axis.

Otherwise, max-content material represents the scale a box desires to include all of its content without being wrapped or overflowing the container.

With this, let’s observe a max-content material to a detailed size:

The HSL function

The abbreviation of HSL is Hue, Saturation, and Lightness and is a character brought in CSS 3. You could refer to this post for a refresher on HSL.

The following example will no longer appear especially useful at first, but test how you can use min and max within the HSL characteristic:

Features that may use min(), max()

Here is a list of capabilities wherein you can use the maths capabilities, even though you might not commonly anticipate to (functions in which you may expect to use them, like calc(), have been left out).

For example:

Functions working in unexpected ways

It’s apparent how you will use these capabilities in functions like width or calc() (or, if no longer at once noticeable, a way to use them, as a minimum). But numerous other approaches may be used that might not be apparent with ease.

The lesson to take from this section is that on account that these functions work on units, you can take as input any feature that returns a — value like calc() — (or use them in any characteristic).