Monday, July 15, 2024
HomeCSSFast Tip: You May Not Want Calc()

Fast Tip: You May Not Want Calc()


Do you know, should you use CSS math features like min(), max() and clamp() and also you’re calculating any one of many arguments, you don’t want calc()? I feel it was Ahmad Shadeed who talked about this on Twitter the opposite day, however I might be incorrect.

So if you wish to use clamp() for some fluid typography, say, with a calc() operate for the center worth, as a substitute of doing this:

h1 {
font-size: clamp(1.5rem, calc(1rem + 3vw), 4rem);
}

You are able to do this:

h1 {
font-size: clamp(1.5rem, 1rem + 3vw, 4rem);
}

It completely is sensible, as a result of min(), max() and clamp() already are math features. However nonetheless, it’s one thing I wasn’t conscious of earlier than!

It really works with customized properties too — try this demo.

By the way, if you wish to know extra about fluid typography in CSS (together with accessibility considerations), this complete information by Adrian Bece has you lined.



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments