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

Channel: Kevin Powell

Views: 130,938

Rating: 4.9781842 out of 5

Keywords: Kevin Powell, tutorial, html, css, css min(), css max(), css clamp(), min(), max(), clamp(), responsive typography, responsive type css, min font-size, max font-size, css tutorial, css max-width, css min-width, css magic, css is magic, responsive typography with css, how to make text responsive css, how to make text responsive html

Id: U9VF-4euyRo

Length: 18min 12sec (1092 seconds)

Published: Tue Apr 21 2020