DEV Community

Discussion on: Write Fewer Media Queries With the Clamp() CSS Function

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!