min(), max(), and clamp() are CSS magic!
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703029437_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: min(), max(), and clamp() are CSS magic!
In this video I am going to be talking to you about min max and clamp which just let you do some CSS magic we’re gonna start off with min we’re gonna go into Max and then my favorite of all of them is the clamp which lets you set
Minimum maximum font sizes and check this out here at the small screen size this looks alright you know we have our font sizes all set up I’m going to increase this a little bit you can see the font sizes are both scaling up at the same time and then the body size is
Now stopped growing and as we keep going my title at one point there we go has also stopped growing and I did both of those with one line of CSS just one line it’s super exciting I’m so happy about this we have a minimum and maximum font size that’s crazy
Hello my name is Kevin in here at my channel we learn how to make the web and how to make it look good with weekly tips tricks and tutorials and I’m so excited for min max and clamp I’ve had my eye on them for a little while now
But I haven’t really dove into them because I didn’t think browser support was very good for them until I found out it actually was and I got an email from Firefox saying that it was part of the newest release and so I was like okay if it’s in Firefox now have the other
Browsers got onboard what’s going on wait everybody’s on this I know internet explorer is not and will mention again at the end but I do have another video that looks at how you could build in support for Internet Explorer if you really needed it or maybe not support
But you could build in a fallback for Internet Explorer but this to me is super exciting so minimum maximum are really cool I think there’s a lot of really good use cases for them that are gonna let us write a bit less code but then at the end I’m gonna be looking at
Clamp at the whole font size thing because having a minimum font size and maximum font size to me that’s something I’ve been waiting for for so long and the fact that we can start using that is super exciting let’s go and check it out so the very first thing that we’re going
To be doing here is jumping into vs code and we’re going to be looking at the min first that now with min and Max there’s a little bit backwards in how I normally think about these things but they do make sense in the long run so what I’m
Gonna do is start by jumping into my content here which is the white box that we have right in there and you can see I’ve set a width of 70% so I’m just gonna open up my dev to and pop on responsive mode now response mode in Firefox is on this side if
You’re in Chrome it has the exact same icon but on that side and that lets me resize things we can see that my content right here is 70% of the viewport and as that changes it shrinks and grows like you’d expect it to now one very common
Thing to do is having a width and setting a not max but a max width if I make it pretty small here just for demo purposes but a max width of 600 pixels so then it’s gonna shrink but when I grow up at one point it’s in a lock and
It’s not gonna grow anymore so it’s locked in at that 600 pixels as a maximum size now what min lets us do is it lets us write all of this but in one line of code pretty much so what I’m going to do here is take off
All of that and American min and put it in open and closed parenthesis and leave it just like that and then inside of here we can put two or more values it can get a little bit weird if you’re going beyond two values but you let’s start with two because that’s the
Easiest to understand so I’m gonna put 500 pixels and we’ll stick with my 70% and we’ll hit save on that so what this is now doing is it’s looking for the smallest of those two values and it’s going to choose whichever one is smaller
At any given time so when I met a small screen size it’s using the percentage of 70% because right now 70% here is smaller than the 500 pixels but if I grow my screen big enough at one point 500 pixels will be bigger than 70% so it’s choosing me 500 instead again 500
Now is smaller than what this would compute out to so whichever the smaller one is which is why it’s called min so it’s choosing the minimum out of the two is how you can think about it and as I said that is exactly in this case the
Equivalent or as far as I can tell anyway it’s equivalent to writing a width of 70% and having a max width of in this case 500 pixels so like writing this one line is equivalent to writing those two lines right there and to me that’s really handy I like writing less
If I can so that’s really really awesome that we can do that now I did mention we can write more values in there I’m not going to jump into that quite yet let’s get max first and for the max and Max is the opposite so here I’m just
Gonna switch min to max and hit save and I think now what it’s gonna do is you’re gonna see it’s whichever it’s using the maximum value whichever these two values is bigger so what’s bigger 500 pixels or 70% so it’s locked in at 500 pixels but
If I grow bigger at one point it’s going to start using that 70% in there so at one point it does make the switch over so we could come in here and give this three values but three values are really weird because it does take the smallest
Of the three values so just for fun let’s just try doing a hundred pixels all right not the smallest the biggest in this case 10% can might be a bit small to say 20% and let’s say we’ll do height maybe can we do height let’s say
We do 50 viewport height and hit save if I know this or understanding this right it should actually base the width of it on the height right now so you can see as I’m going up and down on the height of my viewport it’s actually changing the width because the height right now
Is the biggest of those values and as soon as my height gets to a small point small enough point it should stop shrinking it maybe it’s because I made that too big let’s go with like 400 pixels here and we’ll see so there this is working but then all of a sudden it
Gets to the 400 pixels there so it’s actually using a combination of them and if I go wide enough at one point we’re you know I can’t do it now but at one point we could probably get this guy to kick in too so at one point it actually
Start getting wider here it’s doing it based on the 400 pixels and if I go tall enough now it’s actually using my height what I actually use that in real world I really doubt it but I just want to show you that you can use multiple values in
There so you might think of a good use case for that if you can think of one and please let me know down below and if you read the specifications as well it actually recommends a little bit depending on the use case but so you do something like this for this you could
Actually set up a max here as well and you can nest the max inside of there which is kind of weird but you can do it and you can also do math in here so you don’t need to throw a calc like that if you do want to do math you
Can just do your math in here like you might do inside of a calc already so if I come in here and I say my minimum is let’s say 500 pick we’ll do 500 pixels plus other wrong 10% comma and here I’m just going to do that’s a to foreigner pixels I’m gonna
Keep it small so we know our actually before let’s do six so it’s always gonna use the smaller so it’s probably always gonna use this one so 500 pixels plus 10% so you can actually see it is growing and shrinking a little bit as I move things there let’s make this a
Little bit bigger just so it exaggerated things a little bit and I’ll make this a lot bigger just so we know it’s always gonna use the math expression I’ve put there that’s a bit too big because it’s actually going off the screen a little bit 20% there we go
So it should be 500 pixels and you can see as that’s growing it is expanding a little bit or as I go smaller it is shrinking a little bit so again this isn’t the exact use case I would use for it but just to show you you can include
Math if you’re doing pluses or minuses you do actually I think for any of the map you do need to have a space on both sides of the units here so if you did it with like a plus 20 it’s not going to work because you can it’s counting that
As one unit so you just have to make sure that you do include the space there for it to work if you want to do math inside of your min or your max um so for now actually let’s set this back to a width of 70% just for simplicity sake
And we’re gonna move on to looking at clamp now are actually we could look at clamp now we’re gonna do it just with our text um and I’m going to do it first with my paragraph down here and actually I set this up for something else but
We’re gonna come back to that and so I’m gonna set a background on your background of light blue just so we can see the whole size of my paragraph and I’m also going to come into here and set this to have let’s give it a width of
50% so we can just see that it’s now at fifty percent of the total width of the parent the parent grows or shrinks it’s always just sitting at 50 percent what I’m going to do is I’m going to come in here and I’m going to set a clamp so
Clamp is written the same way it’s the word clamp and then open and closed parenthesis but then in the parenthesis you have to give it three values this one only works with three values you do more or less it will not work it’s always a minimum a maximum and a ideal
Size the size that you’d like it to be so this is a little bit like setting a min with a max width and a width on it all three in one which is pretty cool in my opinion so if I come in and set a clamp here oh
Just really fast actually on your min the men in the max just if ever you’re using them it doesn’t matter which value comes first you don’t have to go smallest the biggest or biggest to smallest it’s just always going to choose either the maximum value or the
Minimum value depending on which one you are using I’m for a clamp I’m going to come in here and say that we’re going to set a minimum of 300 pixels and we’re gonna set a middle ground here of 50% so we’re gonna keep the ideal at 50% and
We’re gonna set and we’re gonna set a maximum of let’s just mix our units even more we’ll set 20mm on there so it wants to be 50% but it has a minimum size of 300 pixels I’m actually add these values are made a bit too big so I’m gonna drop
That down to 200 I think there we go so you can see here it is growing and shrinking with this window and I’m going to make this window a little bit bigger for this it’s shrinking here but at one point it stops shrinking so when it hits
The 200 width it’s stopping to shrink cuz that’s its minimum value here it’s starting to grow it’s starting to grow and when we hit 20 R M it stops growing even though that gets bigger so ideally it’s at 50% we’ve created this middle ground if it has a minimum width and a
Maximum width now personally I’m not the biggest fan of setting up the minimum width on items minimum widths they can cause a lot of issues when you’re going to mobile you have to read you overwrite them stuff like that so I don’t know how often I would use clamp for widths I’m
Sure there are some use cases that I will start finding but what I would do here instead is actually I think it could be a very good use case for font sizes so one thing people like to do for font size is set something like 3 viewport width and that’s way too big
Let’s start with 2 um so there we go that’s not too bad of a font size and if you don’t know a lot about viewport units I do have another video that does do a pretty big deep dive into them and in there one of the things I mentioned
Is that you can do something like this where you set your font size and viewport widths and the nice thing with that is as your page grows and your text froze and shrinks so it becomes very fluid and people love this idea of fluid design and all of that but
The problem is you can see at small screen sizes it’s becoming unreadable and there’s another big issue with font sizes when they’re set in viewport units and I’m going to turn off responsive mode here for a second this we can see what it is and so on a website say somebody gets
There and the let’s set this to one viewport width and it’s way too small and this is just for my example here but it’s way too small so the good person who visits the site tries to zoom in on the page and there’s zooming in and you noticed the font size isn’t changing
Because the font size is only related to the width of the viewport that’s a big issue it’s like person the person will leave the site if they find it’s too small so it’s really strongly recommended not to do something like that now there is an alternative where you can wrap a calque
Around here so I could say to viewport width comma comma +1 rim let’s just say that’s way too big 1 plus 0.5 will probably make a lot more sense so it looks kind of big even now maybe 0.5 plus 0.5 so what this is doing oh we’re
Also zoomed in to 240 percent there we go that’s a little better I’ll go with 1 plus 0.5 Ram so this is setting it to one viewport width plus 0.5 ramp so the point 5 becomes like this baseline so now if i zoom in it’s actually going to
Get bigger because the remm unit is increasing in size with the zoom or if i zoom out the remm unit you know is getting smaller so you can actually zoom in and zoom out and with this the nice thing is with responsive mode on it will still create fluid text but overall
There’s still a bit of an issue with this where you can see it is still getting really small at small screen sizes and you don’t want people having to pinch and zoom when they’re on a mobile experience because your bodies font size is too small so for now I’m
Going to turn that off we’re going to come up to the title and do the same thing here so font size clamp and in my clamp we will set a minimum I’m gonna set a minimum of two REM a middle ground of let’s write 5 viewport width and a
Maximum of 5 REM the smallest that’s ever gonna get here is the two REM and at one point that’s going to start increasing with my viewport unit so you can see here it’s locked in its locked in then all of a sudden it starts increasing and then when you get to the
Really big sizes at one point there you go you can see it’s off the screen you can viewports a bit bigger than the recording area on my screen right now you can see that at one point as that keeps increasing it is locking into
A maximum size now just for fun if I did my font size with just a 5 viewport wit instead just to give you an idea of what could happen this point it’s looking the same but it’s small sizes it sort of gets really tiny for a title and the big
Size is at one point it starts getting really really really big and so it’s nice that we can limit it all and you know this is effectively creating a minimum font size a maximum font size and it’s automatically filling in the middle it may be going well what about
Zooming and all of that let’s check it out and see what happens but at one point I do believe the font size will actually change and I don’t see it changing right now and I’m zooming to extremes mm-hmm let’s try it on down here so font
Size clamp and this one will do 1 Ram comma 1.5 you port wit which is a bit big and we’ll stop it at 3 1.5 1.25 RIM I don’t know if that’s actually gonna work at all let’s try it out so if I shrink it down it’s okay that’s staying
At one Ram if I go bigger at one point it will start increasing and then it locks in let’s make this something like that maybe you would actually be better so it’s going to increase and then it locks in and then it starts shrinking back down let’s
Bring this like this actually we can see it’s increasing right around here it’s any bigger and then that body font size has locked in and then again the same thing that way and then it’s all going to lock in now if I turn this off and I
Zoom in you can see the font sizes out bold font sizes are actually zooming in or and then on my shrinking both font sizes will zoom out as well it does create a little bit of a middle ground where we’re not seeing it and the issue
Before I think when it was just my title was that I left the responsive mode on which sort of changes how the zoom behaviors are working so here with the responsive mode off when i zoom in we’re getting a better idea of how that’s actually working so I find that really
Really cool it’s keeping some of our accessibility by letting us zoom in and zoom out and the font sizes will adjust it’s letting us set a maximum and minimum font size which to me is absolutely amazing I’m so excited by that and overall I think it works really
Really well it’s something that I’m very excited about and I haven’t explored a lot yet if you have done that and you have some cool uses cases for it please post them down in the comments below to share with everybody else has a really quick aside if you want to use this in
More projects you want to use it but you’re worried about the backwards compatibility I do have a video that looks at feature queries which are the app support thing you can the video doesn’t talk specifically about this but you could definitely use that in supporting this you could set like
Default font sizes and then include this for better experiences for most people who are on the more modern browsers so you can check that one out the link to it will be down in the description below a really big thank you for watching if you have not yet to subscribed and you
Enjoyed this video please do consider subscribing also just in case you don’t know I do have a discord community where other Deb’s chat about Debbie stuff and all the other stuff and just hanging out and lately it has exploded there’s tons of people in there so if you’d like to
Join us there is a link to it down in the description below where you just click on it it’s gonna bring you right in and you can come and hang it with us and ask questions and all of that type of stuff if you do have
Questions it’s a lot better to ask over there than in the YouTube comments because it’s hard to talk about code in the comments section of a YouTube video thank you very much for watching I really do hope you enjoyed this one I’m super excited about this and definitely
Plan on starting to use it a little bit more now that it is supported pretty much across the board almost so I’m really looking forward to that thank you very much for watching I appreciate it thank you to my patrons for all your support every single month it is greatly
Appreciated you guys are amazing thank you very much and of course until next time don’t forget to make your quarter the Internet just a little bit more awesome
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Hello Kevin, very useful content. I like your videos 🙂 What shortcut do you use to put line inside the comment so quickly?
why are you using em instead of rem in body?
Thank you for your valuable and amazing videos. Your videos helped me a lot since I have started programming.
Find yourself a woman who talks about you like Kevin talks about CSS.
Does it work for widescreen?
Très grand merci à toi Kévin pour ton altruisme et ce partage 🙂
Question? Can you perform math in the clamp in the same way as you do with the min or max? I am assuming you can.
Kevin, great tutorial! Thank you. A question I have is: do I use Global Settings for my font first? What is best practice for configuring font sizes (ex H1, H2 etc, p, etc)?
will I be able to assign clamp to a variable? how would I write that please..
I ran into a problem where when i do math inside the max or min, when i minimize the code to publish, the math breaks. Very cool tutorial, makes me want to take a better look at how this works.
thank you for the video 🙂 helped me with clamp alot.
Привіт з України , дякую Вам King of CSS ! Так Вас називають ваші колеги !
Sir Relax Well OKay.
Thank you from Argentina, sir!
Mixing units of measure is more confusing than helpful in an educational video.
How did I not know this existed before?
9:28 this is why I watch your content and nothing else, you don't fail to address the minor details!
Best html/css teacher !
You're the best!!! Thanks so much
you're so informative but 80% of your talks in your videos are pure BS. the essence of this video can be delivered in 5 mins.
i know this is how youtube works and you need " watch time ".
but i don't like my time to be wasted and im not here to entertained .
if anyone looking for real stuff about front end, visit " Codevolution " .
i dont work there im just helping YOU.
less than 5 min of the video I learn something nice