Why 🗜️ 👈 is the one of the most powerful css function?

#css #html

Fun fact: 🗜️ is the emoji for clamp according to emojipedia

Lets talk about css `clamp()` function.

If you have ever wondered how you can define range to a css property e.g minimum, preferred or/and maximum value, then clamp is the go to function.

Here is how you can use.

clamp(MIN,PREF,MAX)

You give a minimum value, a preferred value and a maximum value.

One of the most common use of clamp() is in creating fluid/responsive typography. Your font-size will change based on the viewport size without writing any additional media queries. You can give a minimum/maximum font-size but everything in-between will be fluid if you use viewport units like vw or vh;

Here an example ( try to resize the result tab )

You can use clamp function for lengths, percentages, angles etc. You can read about it more here.