Nice video from Kevin Powell. Here are some notes, thoughts, and stuff I learned while watching it. Right when they came out, I was mostly obsessed with font-size
usage, but they are just functions, so they can be used anywhere you’d use a number, like a length.
Sometimes pretty basic usage allows for tighter code, but the change to get there feels a little mind-bending. Like how to set a “max” here, you really use min()
.
.el {
width: 75%;
max-width: 600px;
/* tighter, but the change from max to min feels weird */
width: min(75%, 600px);
}
The min()
and max()
functions can take more than two values, which is cool, but hard to keep straight what is going on! It would be nice if DevTools could tell you which one it picked at any given time.
.el {
width: min(100px, 25%, 50vh, 30ch);
}
You don’t need a calc()
to do math inside!
.el {
width: min(10vw + 10%, 100px);
}
It’s reasonable you’d want to be setting a min and max value. You can nest the functions to do this, but it’s less mind-bendy to do with clamp()
.
.el {
/* Note we're always using a relative unit somewhere
so that zooming stays effective. */
font-size: clamp(0.9rem, 1vw + 1rem, 2.2rem);
}
Here’s the video embedded:
This is nice and all but clamp() doesn’t have necessary browser support to make usage feasible.
Notably a complete lack of support from Safari.
You will need a fallback solution, but browser support is already decent, including full support in latest Safari version:
https://caniuse.com/#feat=css-math-functions
Does now!
I’ve been messing around with clamp() and it really is wonderful for fluid type!
One thing though with your example with font-size and clamp(): because your default size is set to 1rem+1vw, the minimum size you’ve specified can never be reached: 0.8rem. The vw unit never goes negative so the actual minumum size (if a screen were zero pixels wide) would be 1rem, not 0.8rem. So I think you’d need to set the rem amount in the default value to be the same as the min amount:
font-size: clamp(0.8rem, 0.8rem + 1vw, 2.2rem);
Does that make sense?
Yes indeed. I suppose even with
0.8rem + 1vw
it would be awfully hard to get all the way down to 0.8rem. Maybe it makes sense to just do a little visual testing and pick apx
value that feels about as small as it should ever go.In this case, I think you don’t even need clamp. min() alone could handle the job because, as you mentioned, vw will never be negative.
If I’m not mistaken, min(0.8rem + 1vw, 2.2rem) will produce the same result.
You can actually use min and max together and have the same result with clump. You can write min(23px,max(16px, 23/1280 * 100vw)) where 23px is in fact the biggest font size you want to give to your text and in the opposite with max you give the smallest size which is 16px. Then you say that when you reach at 1280px viewport width take the 23px and start shrink them and that’s it, all the browsers support this
Jeremy Keith wrote (https://adactio.com/journal/16887) about problems compiling Sass with this code, because Sass tries to do the 50% + 0.66vw math itself, which can’t work in a precompiler without knowing what 50% or 0.66vw is:
But there’s a workaround, use Sass interpolation and place a string with the calculation in it:
Man this is the Holly Graal for at least font-size purposes! All browsers in the world sh… MUST implement that right now!
In clamp, why is it not possible to give min font size, max font size, min screen width and max screen width? Wouldn’t that be more straight forward than all that maths?
Interesting thought. But clamp is not limited have a vw-based unit as the second value. It could be based on percentages or ch. So having a minimum and maximum screen width as additional parameters would not make sense all the time.
But if you want to calculate the
vw + rem
values in a given viewport range – we just launched a little tool, that helps exactly with that:min-max-value-interpolation-tool
Note: clamp does not automatically readjust when resizing the browser – must refresh to apply the sizing.