DEV Community

loading...

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 Author

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 Author

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