Day 32: the clamp() function
source link: https://www.matuzo.at/blog/2022/100daysof-day32/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Day 32: the clamp() function
posted on November 8., 2022
It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.
The clamp()
function defines a minimum value, a preferred value, and a maximum value.
A quick recap of min() and max() before we talk about clamp()
:
We can use the min()
function to define a maximum value for a property. It's the maximum value we define because in the list of provided parameters, min()
will always pick the smallest value. For example, width: min(700px, 90%)
is always 700px or less, which means that the maximum width is 700px.
div {
width: min(90%, 700px);
}
We can use the max()
function to define a minimum value for a property. It's the minimum value we define because in the list of provided parameters, max()
will always pick the largest value. For example, width: max(300px, 90%)
is always 300px or more, which means that the minimum width is 300px.
div {
width: max(300px, 90%);
}
If we want to define a default value and both a minimum and maximum value, we could do this:
div {
width: max(300px, min(90%, 700px));
}
The max()
function picks the largest value, either 300px
or the result of the min()
function if it's larger than 300px
. This defines the minimum width. The min()
function picks the lowest value, either 700px
or 90%
if it's less than 700px
. This the defines the maximum width with 90%
as the default value.
Since nesting functions is super complicated and my brain still hurts from writing this paragraph, there's a handy alternative for this, clamp()
.clamp()
takes three parameters, a minimum value, a preferred value, and a maximum value.
div {
width: clamp(300px, 90%, 700px);
}
The width
of the <div>
is 90% with a minimum width of 300px and maximum width of 700px. It's basically a shorter way of writing:
div {
width: 90%;
min-width: 300px;
max-width: 700px;
}
Further reading
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK