clamp()

The clamp() function takes three calculations—a minimum value, a central value, and a maximum value. 11.2. Comparison Functions: min(), max(), and clamp()

Links about clamp()

1. min(), max(), and clamp(): three logical CSS functions to use today

   posted on October 14, 2020

   Min, max, and clamp provide some powerful CSS capabilities that enable more responsive styling with fewer liens of code. This post goes over how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS math functions.

   

2. Everything I Learned About min(), max(), clamp() In CSS - Ahmad Shadeed

   posted on May 7, 2020 by iShadeed

   CSS Comparison Functions (min(), max(), clamp()) become supported in Firefox on 8 April 2020, which means that they are now supported in all major browsers. ...

   

3. CSS Clamp: The Goldilocks of CSS Math Functions - Steve Fenton

   posted on April 21, 2020 by Steve Fenton

   There is a problem I have wrestled with a couple of times, which was frustrating to solve... but can now be easily solved using clamp, which is currently in an Editors Draft of the CSS Values and Units Module Level 4 specification. It is sat alongside similar mathmatical CSS

   

4. clamp()

   posted on February 25, 2020 by MDN

   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 u…

   

5. Can I use... Support tables for HTML5, CSS3, etc

   posted on April 27, 2020 by Can I use

   

Code sample

.type {
  /* Force the font-size to stay between 12px and 100px */
  font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
}