clamp

Description
Syntax
Examples
Links

Description

The clamp function for CSS takes three calculations — a minimum value, a central value, and a maximum value — and represents its central calculation.

It is clamped according to its min and max calculations, favoring the min calculation if it conflicts with the max. (That is, given clamp(MIN, VAL, MAX), it represents exactly the same value as max(MIN, min(VAL, MAX))).

Syntax

CSS

clamp()

Values

<clamp()> =
    clamp(
        <calc-sum>#{3}
    )

<calc-sum> =
    <calc-product>
    [ [ '+' | '-' ] <calc-product> ]*

<calc-product> =
    <calc-value>
    [ [ '*' | '/' ] <calc-value> ]*

<calc-value> =
    <number> |
    <dimension> |
    <percentage> |
    <calc-constant> |
    ( <calc-sum> )

<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<dimension>

A number with a unit.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<calc-constant> =
    e |
    pi |
    infinity |
    -infinity |
    NaN

The base of the natural logarithm, approximately equal to 2.7182818284590452354.

pi

The ratio of a circle's circumference to its diameter, approximately equal to 3.1415926535897932.

infinity

Positive infinity.

-infinity

Negative infinity.

NaN

Not a number.

Multiplication.

Division.

Addition.

Subtraction.

Examples

1 · central

2 · +

3 · -

4 · *

5 · /

6 · JS

<!doctype html>
<html>
<head>
    <style>
        *
        {
            --myvar1: 25%;
            --myvar2: 50%;
            --myvar3: 75%;
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
        }
        div:nth-of-type(1)
        {
            width: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            width: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            width: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar4);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value=" ">central</button>
    <button value=" + 12.5%">+</button>
    <button value=" - 12.5%">-</button>
    <button value=" * 12.5">*</button>
    <button value=" / 12.5">/</button>
    <div>clamp</div>
    <div>clamp</div>
    <div>clamp</div>
    <div>clamp</div>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            document.querySelector("*").style.setProperty('--myvar4', 'clamp(var(--myvar1)' + myproperty + ', var(--myvar2)' + myproperty + ', var(--myvar3)' + myproperty + ')');
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>