Hey everyone, welcome back to my blog.
This post isn't a typical blog post per se but rather it's a copy of my notes that I made on the CSS Clamp function. I hope you find them helpful, if you have any questions at all please feel free to reach out to me and I'd be happy to help.
What is Clamp?
The clamp() function allows for the clamping of a value between a upper and lower bound. It allows for the selecting of a middle value within a range of values between a minimum and maximum.
Parameters
Clamp takes 3 parameters:
- Min - This is the minimum value we want the property to be set to.
- Preferred - This is the preferred value, we want to use.
- Max - This is the maximum value we want the property to use.
Under the hood
When we use clamp, for example: clamp(1rem, 2.5vw, 5rem) it gets resolved as max(1rem, min(2.5vw, 5rem)). Essentially, the clamp function combines this previous work around of using max and min together into a single function.
Examples
Below are some examples of using clamp():
font-size: clamp(1rem, 2.5vw, 2rem);
width: clamp(300px, 70vw, 1400px);
Replacing Max Width
You can use clamp() to replace setting both a max-width and width property on an element. For example:
/* This code, will be 60% of the viewport width unless it exceeds 800px */
max-width: 800px;
width: 60vw;
/* We could shorten this to. */
width: clamp(300px, 60vw, 800px);
/* By using this second method we get to define the preferred width (60vw) but also get to define a min and max width. All in one line! */
Fluid Typography
By using clamp() with font-size we can set a font size that grows with the size of the viewport but that is constrained between a minimum and maximum value.
Essentially, this has the same effect as the code shown in this CSS-Tricks Article on Fluid Typography. but in one line and without media queries.
Syntax
As described previously, to use the clamp() function you need to provide three comma separated values, in the order of minimum value, preferred value and maximum value.
Minimum Value
The minimum value is the smallest value provided. It is the lower bound in the range of values allowed and is used when the preferred value is less than this number.
For example:
width: clamp(300px, 10vw, 400px);
In this example, if 10vw calculated to 200px then the minimum value of 300px would be used instead.
Preferred Value
The preferred value is the value that will be used provided that it is larger than the minimum value and smaller than the maximum value.
Carrying on our example from before:
width: clamp(300px, 10vw, 400px);
If 10vw calculated to 350px then this is the value that would be used as it fits in the range defined by the minimum and maximum values.
Maximum Value
The maximum value is the largest possible value the property will be given. This value is used when the preferred value exceeds the value defined for it.
To complete our example:
width: clamp(300px, 10vw, 400px);
If 10vw calculated to 450px then the maximum value of 400px would be used as the preferred value exceeds the maximum value given.
Using Math Functions and Other Expressions
All of the values shown above can be hard-coded values like px, % or vw/vh but, they can also be math functions like calc() or other expressions such as attr() that evaluate to a valid argument type. For example, length.. Finally, you can also use nested min() and max() functions.
As the value accepts math functions, you don't have to use other functions like calc(), you can just use addition, subtraction, multiplication and division on their own. You can also use parentheses to establish a computation order if required.
Finally, the values you use, as seen above don't need to be of the same type. For example, you can have a min and max in px but the preferred value in vw. In fact, you could argue this is one of the primary use cases.
Notable Points
- If using operators when calculating a value, such as
(+, -, / and *), then you need to make sure to wrap each operator in a space on both sides.
Sources / Further Reading
- MDN Docs>)