More

    CSS Functions – How to Use calc(), max(), min(), and clamp()

    In CSS there are a lot of different units of measurement. You have px and percentages, vh, vw, em, rem, and others.

    There will come a time when you want to get a value by combining two or more different units. CSS has a function that you can use to make such calculations – calc(). And in this tutorial, you’ll learn how it works.

    There are other functions you can use with these relative units – like max, min and clamp – that, when confronted with different values, use the appropriate one. These are really useful in responsive layouts, and can be an alternative to using media queries.

    If you learn to use them appropriately you can avoid the jumpy change of layout that can happen when resizing a window if you used media queries, and with less code!

    How to Use the CSS calc() Function

    The calc function takes a single parameter. This parameter can be an expression combining any length unit and the four mathematical operators +, -, /, *.

    You can also use parenthesis to indicate an order of evaluation different than the standard precedence rules.

    In the expression inside the calc() function you can use CSS variables, values obtained with attr(), and values from the functions max(), min() and clamp().

    calc() allows you to calculate a value from complex parameters.

    Note: always leave a space on either side of the mathematical operators.

    How to Use the CSS max() Function

    The max function accepts a list of comma separated values and returns the biggest one. Each value can also be an expression (whatever you can use as an argument for the calc() function can be one of the arguments in this function, too).

    The max function can be seen as a way to determine a minimum value for a certain thing.

    A use case for this function is making a text responsive, while giving a minimum value to the dimension.

    For example:

    In this way, the text will be a tenth of the viewport height, unless the viewport height becomes too small. The text will always have a font-size of at least 1rem to ensure legibility.

    How to Use the CSS min() Function

    In the same way as the max function, min can take any number of arguments, including other max, min, or clamp functions, and give back the smallest value between them.

    The min function can be seen as determining a maximum value.

    For example, let’s say that you are creating a form and you want it to be responsive while the screen width changes. You’ll want to give it a maximum width to avoid that horizontally stretched look that can happen on the largest screens.

    You could write something like this:

    Your page will have a width equal to 90% of the viewport width, or 600px wide, whatever is smallest. So if the viewport width is larger than ~670px, the form will not stretch horizontally.

    Example for min() and max():

    You can see the code snippets at work in this pen. Try resizing the pen horizontally and vertically and see the form width and font size change responsively.

    How to Use the CSS clamp() Function

    The clamp function clamps a value between and upper and lower limit. It selects a value in a range with defined limits.

    clamp takes three values. The first one will be the minimum value, the second one the preferred value, and the third one the maximum value.

    The clamp function will give back the preferred value, unless it is smaller than the minimum value (in which case it will give back the minimum value) or if it is bigger than the maximum value, in which case it will give back the maximum value.

    You can use clamp to have layout elements responsively resize within a range.

    Example of clamp Function:

    See it in action in this pen! Resize the pen horizontally and see how the various elements change dimensions.

    The MDN has more detailed info on all of these functions:

    And with this, you have seen an overview of these four marvelous functions. You have learned enough to start using them, so go out there and have fun!

    This content was originally published here.

    Latest articles

    spot_imgspot_img

    Related articles

    Leave a reply

    Please enter your comment!
    Please enter your name here

    spot_imgspot_img