DEV Community

Cover image for Write Fewer Media Queries With the Clamp() CSS Function

Write Fewer Media Queries With the Clamp() CSS Function

Vitor Paladini on September 07, 2020

Here's a neat little trick: You can use the clamp() CSS function to make font-size responsive and fluid! It works by "clamping", or restricting...
Collapse
 
dar5hak profile image
Darshak Parikh

For older browsers, we could do something like:

h1 {
  font-size: 16px;
}

@supports (font-size: clamp(16px, 5vw, 34px)) {
  h1 {
    font-size: clamp(16px, 5vw, 34px);
  }
}
Enter fullscreen mode Exit fullscreen mode

This should at least work on older Safari. As for IE, well, it doesn't support @supports. :|

Collapse
 
vtrpldn profile image
Vitor Paladini

Great suggestion, Darshak! I wish I could pin comments

Collapse
 
erickpetru profile image
Erick Eduardo Petrucelli

Hey Vitor, you could edit the post adding this suggestion. Makes sense to increase support with little effort.

Thread Thread
 
vtrpldn profile image
Vitor Paladini

Well, it's more a matter of graceful degradation than support increase but your idea is great, I'll do it right now!

Collapse
 
jeremysawesome_86 profile image
Jeremy Smith

Awesome! Thank you for the article and the examples. Much appreciated!

Reading this reminded me of a Github project I saw a couple months ago that allows you to clamp "a line" of text so that the same number of words stay on it regardless of font size.

github.com/tvanc/lineclamp

Collapse
 
clifton893 profile image
Clifton Long Jr.

Dang, that's awesome.

It's wild seeing how CSS is evolving.

Collapse
 
vtrpldn profile image
Vitor Paladini

Yeah! My first experiences with CSS were full of floats and clearfixes so I'm glad to have modern tools like CSS functions, custom properties and Flexbox now 🙂

Collapse
 
qm3ster profile image
Mihail Malo • Edited

Where it really shines is if you do something like

* {
  font-size: clamp(1rem, calc(5vw+0.8rem), 4rem)
}
Enter fullscreen mode Exit fullscreen mode

so that you can modify the speed, and domain, of the responsive scaling.

Collapse
 
glyphcat profile image
GlyphCat

Damn, this is going to forever change the way I style my content.

Collapse
 
peterwitham profile image
Peter Witham

This is genius, never heard of clamp before now.
Thanks!

Collapse
 
scriptedpixels profile image
👨🏾‍💻 Kam Banwait • Edited

Hmmm, can this be pollyfilled in anyway?

EDIT: found a good solution to use it in older browsers via sass bronco.co.uk/our-ideas/creating-a-...

Collapse
 
vtrpldn profile image
Vitor Paladini

The tricky part is that the browser also needs to support the vw. Which our old friend IE also doesn't and never will. :(

I believe the only way to polyfill it would be by using something with JS, like fittextjs.com/

Collapse
 
keizzmann profile image
The_Keizzmann😁🎹🎹💻

Thank you so much for sharing this

This will really improve my responsive designing skills

Collapse
 
ggenya132 profile image
Eugene Vedensky

It's crazy how powerful these functions get when you mix them in with modern modules, too, like grid.

Collapse
 
draer profile image
Michał Murawski

Damn! Some time ago I needed to implement this kind of thing. I only found JS libraries that did not meet my expectations. I wonder how would it have been with this feature :)

Collapse
 
vtrpldn profile image
Vitor Paladini

I believe you're talking about fittextjs.com, right? I also had to do something similar in the past and got super bummed out with the fact that I had to use JS for such a small thing

Collapse
 
dailydevtips1 profile image
Chris Bongers

Nice article Vitor!
Must really start using this!

Collapse
 
vtrpldn profile image
Vitor Paladini

Thanks, Chris. You should, yeah! It is so simple and works so well that makes you wonder why we didn't have it before, haha

Collapse
 
rcsnellink profile image
Ramon Snellink

Woo, that's cool! Surely going to try this on my next project.

Collapse
 
deta19 profile image
mihai

looks nice, but i won't use if because of the low support. Maybe in a few years

Collapse
 
green600 profile image
Liegeois Jules

Thank you !!!! <3

Collapse
 
vtrpldn profile image
Vitor Paladini

Happy to help! 😄

Collapse
 
uzair004 profile image
Muhammad Uzair • Edited

Amazing, few days ago i wrote a web page using css and html, had to add more then 6 media queries because the button and h1 positioned absolute to background pic were going down on smaller viewports 👐