clamp()

Ви читаєте англійську версію цього вмісту, бо ще не існує перекладу для цієї мови. Допоможіть нам перекласти цю статтю!

The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value. The clamp() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.

clamp(MIN, VAL, MAX) is resolved as max(MIN, min(VAL, MAX))

/* property: clamp(expression{3}) */
width: clamp(10px, 4em, 80px);

In the above example, the width will be at most 80px, at least 10px wide, but 4ems wide if an em is currently between 2.5px and 20px wide.

Let's assume an em in the above case is 16px wide:

width: clamp(10px, 4em, 80px);
/* given 1em = 16px, 4em = 16px * 4 = 64px */
width: clamp(10px, 64px, 80px);
/* clamp(MIN, VAL, MAX) is resolved as max(MIN, min(VAL, MAX))) */
width: max(10px, min(64px, 80px)) 
width: max(10px, 64px);
width: 64px;

Syntax

The clamp() function takes three comma separated expressions as its parameter, in the order of minimum value, preferred value, maximum value.

The minimum value is the smallest (most negative) value. This is the lower bound in the range of allowed values. If the preferred value is less than this value, the minimum value will be used.

The preferred value is the expression whose value will be used as long as the result is between the minimum and maximum values.

The maximum value is the largest (most positive) expression value to which the value of the property will be assigned is the preferred value is greater than this upper bound.

The expressions can be math functions (see calc() for more information), literal values, or other expressions, such as attr(), that evaluate to a valid argument type (like <length>), or nested min() and max() functions. As math expressions, so you can use addition, subtraction, multiplication and division without using the calc() function itself. You may also use parentheses to establish computation order when needed.

You can use different units for each value in your expressions, and different units in any math function making up any of the arguments.

Notes

  • Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.
  • It is permitted to nest max() and min() functions as expression values, in which case the inner ones are treated as simple parentheses. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself.
  • The expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( * ) and division ( / ) operators, using standard operator precedence rules. Make sure to put a space on each side of the + and - operands. The operands in the expression may be any <length> syntax value. You can use different units for each value in your expression. You may also use parentheses to establish computation order when needed.
  • Oftentimes you will want to use min() and max() within a clamp() function.

Formal syntax

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

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

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

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

Examples

Setting a minimum and max size for a font

clamp() allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size. It has the same effect as the code in Fluid Typography but in one line, and without the use of media queries.

p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
<p>
If 2.5vw is less than 1rem, the font-size will be 1rem.
If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
Otherwise, it will be 2.5vw.
</p>

Accessibility concerns

TBD

Specifications

Specification Status Comment
CSS Values and Units Module Level 4
The definition of 'clamp()' in that specification.
Editor's Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
<clamp()>
Experimental
Chrome Full support 79Edge No support NoFirefox No support NoIE No support NoOpera Full support 66Safari No support NoWebView Android Full support 79Chrome Android Full support 79Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

See also