min(), max(), and clamp() are CSS magic!

  Переглядів 285,769

Kevin Powell

Kevin Powell

День тому

CSS has come a long way, but min(), max(), and clamp() make a lot of things a lot easier than they used to be, and really open up the world of responsive typography like we never had before! Clamp() is the ingredient that we've needed for a long time to really be able to make type fully responsive in our CSS, and to be able to do it on one line is absolute magic!
Until Safari gets there too, we can use it, but with the help of feature queries, which I made a video on here: • Using Feature Queries ...
If you'd like to learn more about viewport units like `vw` and `vh`: • CSS Units: vh, vw, vmi...
#css #responsive #typography
--
Come hang out with other dev's in my Discord Community
/ discord
---
Keep up to date with everything I'm up to
www.kevinpowell.co/newsletter
---
Help support my channel
Get a course: www.kevinpowell.co/courses
Buy the t-shirt: teespring.com/stores/making-t...
Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my UKposts channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

КОМЕНТАРІ: 301
@MelTurner
@MelTurner 3 роки тому
Maybe important to mention that SCSS can get confused if it encounters a CSS min or max function because SASS has conflicting functions. For example min(200px, 80%) will cause a SASS units error. The trick is to capitalize: Min and Max so they are ignored by SASS (CSS is case insensitive)
@gemarefantero1723
@gemarefantero1723 2 роки тому
Wow! Thanks for the tips!. I've been found this problem for a long time ago, and I never get the answer of it until now!
@cretik5296
@cretik5296 Рік тому
I encourage this problem today, thank you for this comment
@holypowerenjoyer6059
@holypowerenjoyer6059 Рік тому
dude's a lifesavior
@kariakichernocherno2274
@kariakichernocherno2274 Рік тому
very case insensitive
@sivavijay1208
@sivavijay1208 Рік тому
tHaNkS dUdE
@mintran
@mintran 3 роки тому
I thought I was pretty good at CSS until I discovered your channel.
@coced
@coced 3 роки тому
Subscribe to Kevin for your regular dose of Dunning-Kruger effect
@proudyy
@proudyy Рік тому
Actually same. My css is quite messy but still at a point sorta advanced. I just have huge problems with responsibility and the entire layout which is basic stuff. xD So to be honest, I am still quite a beginner. I got my way although already into custom box-shadows, linear and radial gradients as such, and different color units (rgb, hex, ...).
@lewisone
@lewisone Рік тому
Right. I felt I was a rockstar until I found Kevin telling me that I barely know 20% of the things I need to know. Ego drop.
@Bean-kw2xp
@Bean-kw2xp Рік тому
same
@rileycroft5835
@rileycroft5835 3 роки тому
Whenever I have a issue with CSS or just want to learn a new property. I’m always so happy when I can find a video from Kevin explaining the subject! His a CSS magician ✨
@shaikhabdulazim6908
@shaikhabdulazim6908 2 роки тому
He is a legend 👌
@astrodas1910
@astrodas1910 2 роки тому
So true! I was thinking, it'd be great to have a way to make font-size responsive with simple code. Next time I open youtube BOOM! This video appeared on my home page :)
@ukyo6195
@ukyo6195 4 роки тому
Works in all modern Browser: font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); e. g. font-size: calc(2.25rem + (36 - 20) * ((100vw - 300px) / (1600 - 300)));
@noinfo9941
@noinfo9941 4 роки тому
I use this one too after reading the article from css-tricks "The Math of CSS locks".
@samuelgoncalves5616
@samuelgoncalves5616 4 роки тому
Your code is wrong, should be: font-size: calc(20 + (36 - 20) * ((100vw - 300px) / (1600 - 300px)))
@samuelgoncalves5616
@samuelgoncalves5616 4 роки тому
But is a great tip, thanks
@ukyo6195
@ukyo6195 4 роки тому
@@samuelgoncalves5616 does it not automatically use px if a unit is not set, I’m not sure. Otherwise thanks for the correction, I’ll test it. 👍
@nikilragav
@nikilragav 3 роки тому
Ya that's what I used to do :)
@codingtime3803
@codingtime3803 3 роки тому
I can't thank you enough kevin! I have learned so much about css and responsive design from your channel !! Your videos are gems!
@ZoeSiskos
@ZoeSiskos 4 роки тому
Oh boy, I have an itch to go back to all my projects and use this! Thank you for such a clear explanation!
@GineetMehta
@GineetMehta 4 роки тому
I am absolutely baffled at the quality of content you put out, Kevin. Direct, crystal clear, practical videos of everything relevant. No BS. I have been working as a frontend developer for around 14 months now, and I stumbled on your channel while searching for Intersection Observers. Love the content! Subscribed to the channel and will sign up for the newsletter too. Thank you for your time and effort in giving back to the community. Much appreciated.
@joeldcanfield_spinhead
@joeldcanfield_spinhead 4 роки тому
This, I've dreamt about for so so long. Not back in '94 when I started coding HTML3.2, but it's definitely been years.
@Colstonewall
@Colstonewall 4 роки тому
WOW! I had no idea there was anything like HTML around that time ('94). I didn't even know the Internet existed until about 1997. You've been at it a while Joel!
@joeldcanfield_spinhead
@joeldcanfield_spinhead 4 роки тому
@@Colstonewall Sheesh; I was LATE to the game. The first graphical browser, Mosaic, was released in '93 and other folks were already making stuff I envied. Now, imagine the years from 94 to 99, the long wait for HTML4. Oh, and the same wait for CSS to be widely supported by both browsers [yeah, 'both':Netscape Navigator and Internet Explorer because, c'mon, there were like 3 people using Opera and 12 using Konqueror.] More old man rant: this was also all delivered over modems at speeds of 28.8kb. A 2:36-long mp3 would take 6+ minutes to download. A video would take about ten thousand years.
@Colstonewall
@Colstonewall 4 роки тому
@@joeldcanfield_spinhead Amazing. How I wish I had gotten into the game at least in the late 90's or early 2000's much less when you did. You're a Legend, Joel!
@KevinPowell
@KevinPowell 4 роки тому
Same. I did it on and off as a hobby since the late 90s. Sort of wish I got into it full-time earlier! Though I don't miss table based layouts 😂
@joeldcanfield_spinhead
@joeldcanfield_spinhead 4 роки тому
@@KevinPowell No kidding. I stumbled across a horror yesterday: I'm redesigning my author website and went to take one last look at two of my favorite authors' sites. I keep forgetting that one of them, a famous mystery writer, has a website that was built with tables in 1998 (no exaggeration) and nothing but the content has been updated since.
@shvideo1
@shvideo1 2 роки тому
Loved the usage of clamp() function with the font-size property and also learning about "vw" units. This is very handy and useful for web design. Thank you Kevin for this great video!
@crstfrdrnt
@crstfrdrnt 3 роки тому
I'm two weeks into seriously learning html and CSS and keep coming to your videos because they're awesome. You are one great teacher
@loganligas8418
@loganligas8418 2 роки тому
How are you doing now? Hope all is well. :)
@spyrosp
@spyrosp 4 роки тому
Thank you Kevin! Always up-to-date 💪
@degagnemarc
@degagnemarc 3 роки тому
Just love it! Great for replacing some media query. .row { width: clamp( min( 95%, 414px ), 80%, 1200px ); } Thanks Kevin for making us better devs.
@guillermodanielmazzarigiov1768
@guillermodanielmazzarigiov1768 2 роки тому
Could you please explain what you did in that codeline 😂😂😂 I'm new to this
@the_meaning_of_love
@the_meaning_of_love 2 роки тому
@@guillermodanielmazzarigiov1768 width of: - It doesn’t matter how big the screen is, it will never grow over 1.200 px (max-width) - When the screen size is small enough that the 80% of the container is smaller than 1200px (for example a screen of 1240px), it will be 80% of the width of the container. - And when the screen size is really small (as in mobile devices), the minimum size the element is going to get is 414px or 95% of the container, whatever is smaller. Basically this line is defining what’s the minimum width of the element with a min value (95% or 414px, whatever is smaller), what’s the preferred size of the element with an 80% of the container width, and what’s the maximum size of the element with a fixed value in pixels (1200)
@dexter3943
@dexter3943 2 роки тому
what would be the media query values for this?
@guillermodanielmazzarigiov1768
@guillermodanielmazzarigiov1768 2 роки тому
@@the_meaning_of_love I hadn't seen your answer, thanks man! Btw, this is brilliant, and if I would have read your answer 2 weeks ago I wouldn't have understand it anyway lol, this made me very happy, to see how much I've learned in only 2 weeks 😀
@irfansaeedkhan7242
@irfansaeedkhan7242 Рік тому
you are geniius, can i get your github repo or linkedin profile for more pro stuff, like a project that covers all these standards and we can copy from here when making new project, i already use mixins for media queries and fonts for reusability but you share some next level thing for me in a single line
@janelleschuh8424
@janelleschuh8424 3 роки тому
Kevin, thanks so much for the great video!! I've recently started my web development journey and your channel has been a tremendous help. So much so that as I'm practicing my skills via UKposts video projects or Udemy course projects I'm not following along entirely and instead am inserting some of the new, cool CSS properties like clamp(). Thanks again!!!
@MarkRMu
@MarkRMu 4 роки тому
Started coding websites professionally about two years back. Your videos really helped me out back then and still do today :)
@ra9r
@ra9r 3 роки тому
I've only recently discovered your channel but DAMN, great content. Thank you and keep it coming!
@rodrigonoales
@rodrigonoales 3 роки тому
Amazing the amount of media queries you could potentially save to write ! Thanks for sharing
@patrickc.6183
@patrickc.6183 4 роки тому
Wow! This is literally something I could use ALL the time when writing CSS! Thanks 😁!
@petarkolev6928
@petarkolev6928 2 роки тому
Amazing video! Kevin, you just don't stop amazing me with each video, love your work!!!!
@gosnooky
@gosnooky 3 роки тому
Really enjoy your videos. I spent most of my career from the 90's onward doing systems programming in C, C++ and Java, but now that the money is in front end, I'm digging all these modern toys and tooling.
@nested9301
@nested9301 Рік тому
toys lol
@AllElectronicsGr
@AllElectronicsGr 4 роки тому
Your channel is sooo nice !
@nikhiltyagi1080
@nikhiltyagi1080 4 роки тому
One of the best and most useful videos you have ever made. Thanks a lot boss!!
@mahdihashemi408
@mahdihashemi408 7 місяців тому
Thank you for your valuable and amazing videos. Your videos helped me a lot since I have started programming.
@manantank
@manantank 4 роки тому
I used this a while ago and forgot about it. Thanks for reminding me. Also I didn't know you could give more than 2 values as arguments. That is pretty cool
@burmesepotato447
@burmesepotato447 3 роки тому
Hi Kevin. I always learn something new from your vids and loved 'em! Can't wait to try clamp() on fonts. It'd be nice to see how to add proper fallbacks for them in next video :)
@pagalpantipupun
@pagalpantipupun 4 роки тому
You won't believe I was looking for the exact thing today. Superb job. I am a new member of the house but I know there is a lot to learn.
@codellyson
@codellyson 2 роки тому
I guess you can never know it all when it comes to CSS, thanks Kevin, you are doing a great job.
@iJimJones
@iJimJones 4 роки тому
I think this will come in handy for a use-case I am planning. It is a cemetery layout with grid blocks for gravesites in which the text within each block as one zooms in or out stays readable and appropriately sized. I need to couple this idea with displaying alternative text and more/less text based on size too (last name of burial only to full name to name and dates, for example).
@BogdanAnghelina
@BogdanAnghelina 4 роки тому
Great job, man! It's a great content and your work is very helpful. I just start do write my new Wordpress theme and I use some of your videos for my CSS optimizations, tips and tricks.
@stefanielis7052
@stefanielis7052 3 роки тому
OMG you SAVED ME. I'm just starting out but I wrote a webpage using TEN MEDIA QUERIES just to make the simple home page responsive and now with this I don't need a one. THANK YOU.
@danielChibuogwu
@danielChibuogwu Рік тому
Thanks for this video Kevin, it was really really helpful😊
@TDavisOfficial
@TDavisOfficial 2 роки тому
Man, this just helped me out sooooooo much. Thank you, thank you, thank you!
@j.almadhaji
@j.almadhaji 4 роки тому
Thank you Awesome content as always
@mtolin82
@mtolin82 4 роки тому
Wow. Thank you so much, you explain very well, so I have just subscribed!
@JohnChristosMolura
@JohnChristosMolura 4 роки тому
Css is getting more exciting recently. I have not done much css work for a few years. On and off ... and each time i come here first to brush up on it. Thanks Kevin. Appreciate the videos. I have a request though. Could you make a video on using variable fonts reliably with fallbacks that make sense.
@deankinyua2365
@deankinyua2365 2 місяці тому
your channel is incredibly enllightening Kevin🤩
@ritaravinsky8262
@ritaravinsky8262 4 роки тому
So cool, thank you Kevin
@hanziel
@hanziel 3 роки тому
Ok, I think I need to binge your videos! Great CSS I've never seen before.
@KevinPowell
@KevinPowell 3 роки тому
Hope you enjoy my other videos :)
@norbertperka9231
@norbertperka9231 3 роки тому
hi Kevin I recently found your channel and as I'm rookie to coding and building my own project I gave it a go to clamp() not only for font-size but also for margin and padding and I can say it works pretty good but I guess you already know about it :)
@sherwancaris5199
@sherwancaris5199 Рік тому
just before one hour, i wrote these line of code: width: max(min(10vw, 250px), 150px); because I had never heard from clamp() function! And after I watched your video, i realized that I can change this to clamp(). thanks 👍
@CipherosX
@CipherosX 3 місяці тому
It's interesting... something that maybe wasn't clafiried it's about with the 'min' and 'max' functions as well as the clamp one. One of the both values must be a relative unit such as percentage or viewport. With the clamp function this concept is applied on the 'ideal' value. Thanks Kevin for all the information you share!
@CB-fd4xu
@CB-fd4xu 2 роки тому
Finally! I've been enlightened. Thank you, Kevin.
@bazzle_brush
@bazzle_brush 4 роки тому
I've been waiting for this for years
@nomadaxable
@nomadaxable 3 роки тому
Loved this video. Thanks for the good content.
@pulok9909
@pulok9909 4 роки тому
KP you are really awesome.I am learning CSS from your channel.It helps me a lot .May you live long.Recently I have become your fan.pls keep this good work up.
@KevinPowell
@KevinPowell 4 роки тому
Thanks and welcome :D
@slipoch6635
@slipoch6635 4 роки тому
it's css vars, or wasm. Completely supported without any fanfare whatsoever. Although I never use a max body size for a website, because then on 2k/4k screens it can end up looking awful. You could use clamp for column size in css grids for auto column sizing. Great video man!
@crooker2
@crooker2 4 роки тому
This is great. I was using your calc() dynamic font-size trick, but I think I will default to this and have the calc as the fallback until mass support.
@gabrielpena5829
@gabrielpena5829 3 роки тому
This video is amazing, I understood everything, THANK YOU
@singhravjot
@singhravjot Рік тому
Awesome explanation!
@sleepless83
@sleepless83 Рік тому
You are awesome! I love your videos!
@nevergonnadanceagain369
@nevergonnadanceagain369 Рік тому
thank you for the video :) helped me with clamp alot.
@_neuromanser_
@_neuromanser_ 4 роки тому
This is excellent, thanks! :D
@shhhpiderman8332
@shhhpiderman8332 3 роки тому
I couldn't figure out why people were adding in 1em/rem/px for the middle value. Thank you so much!
@justingiovanetti
@justingiovanetti 3 роки тому
Great video, cool stuff. Definitely a step in the right direction. Better than just relying on media queries. Regarding its application for font size, I’d argue though that a person’s field of view doesn’t change according to a view port or container size. That said, there are still specific use cases for being able to dial the font size on a granular level, but I believe it’s not nearly as many as people think, or nearly as significant as people perceive it to be.
@somtovitus
@somtovitus 2 роки тому
this is beautiful
@jamjam3448
@jamjam3448 Рік тому
You're the best!!! Thanks so much
@_jeffe04
@_jeffe04 2 роки тому
I tried max and it works perfectly with both desktop and mobile. It is what I was looking for. thanks!
@obscurecult
@obscurecult 3 роки тому
This is awesome, I'm gonna start using right now
@jv18creator
@jv18creator 3 роки тому
O my goddddd... Man great video... Helped me a lot
@Olderaccount17
@Olderaccount17 Рік тому
Thank you from Argentina, sir!
@CreativeJE
@CreativeJE 4 роки тому
Awesome keep the great content coming
@aaron_phillips
@aaron_phillips 2 роки тому
Great video! This solved an issue I was having with a project I was working. :P
@Cdswjp
@Cdswjp 2 роки тому
thank u man. I appreciate u
@kokazo2009
@kokazo2009 4 роки тому
Thank you Kevin, I should definitely give it a try. Maybe you could show the computed section from the dev tools to see how font-size is changing on real time
@KeksBln
@KeksBln 2 роки тому
Good idea!
@JacksBracket
@JacksBracket 3 роки тому
This.is.INCREDIBLE
@VasilyPavlik
@VasilyPavlik 4 роки тому
That is absolutely incredible cool!!! This is exactly what I need right now. Last and this week. Thank you so much. (Went to change 25% of my code).
@andreiode8712
@andreiode8712 3 роки тому
Thank you sir....good explanation 🙏
@mariachaudhry4608
@mariachaudhry4608 3 роки тому
Your cheering voice is infectious
@alexisjones2045
@alexisjones2045 2 роки тому
Clamp seriously saved me on this website I'm building right now! Thanks so much.
@shayanfaghihi
@shayanfaghihi 3 роки тому
You are awesome! Thanks and big love from Iran :)
@klutch4198
@klutch4198 2 роки тому
Absolute GOLD, font size responsiveness is just one of those things
@ushanmithma9716
@ushanmithma9716 4 роки тому
Wow this is very useful sir, thank you very much 👌
@csupra7
@csupra7 4 роки тому
Finally something that I've been searching since long time...
@kaveengoonawardane9651
@kaveengoonawardane9651 Рік тому
Thanks mate!!
@mfranchi82
@mfranchi82 2 роки тому
What a Awesome videos, Kevin. Thanks for your explain
@nikilragav
@nikilragav 3 роки тому
I used to do this with calc with a linear equation although I don't remember exactly what it was something like calc(vw*some small number + 16px) so 16 is the min and it can get bigger from there
@mariprugovechi
@mariprugovechi 2 роки тому
thanks for that! u r awesome! :)
@RanjitSachin
@RanjitSachin 3 роки тому
Well explained.. Thank you.
@DerSolinski
@DerSolinski 4 роки тому
Oh... it wasn't fully supported until recently that explained a lot 🤣 I'm so used to those functions and never really checked since they are fairly common in many programming languages...
@quietScooter
@quietScooter Рік тому
9:28 this is why I watch your content and nothing else, you don't fail to address the minor details!
@mohamaddadh3493
@mohamaddadh3493 2 роки тому
thank you so much teacher you are awesome man
@noco2605
@noco2605 Рік тому
Thank you very much, very useful to know
@suav1148
@suav1148 3 роки тому
Great to know! I've always wished I could use min- and max- for font-sizes. Now I can use this! Thank you, Kevin!
@yevgenia7785
@yevgenia7785 3 роки тому
Thank you!
@-ct-celcomtechniques2566
@-ct-celcomtechniques2566 Рік тому
Best html/css teacher !
@bernattousfiga
@bernattousfiga 2 роки тому
Hi Kevin, Have you tried to set the html font size with clamp() and define all your site sizes (margins, font sizes, paddings...) with rem units? It makes all your web 100% responsive without using any media query! I used to redefine de html font size inside the media queries to scale the content according to the page width, but with clamp() I just don't need to do that anymore! Combined with the proper grid and flex properties, I'm able to have a nice responsive layout and get rid of media queries. Awesome! PS. Thanks a lot for all your content! I really appreciate your work. It's just brilliant and it helps a lot of people like me to become better frontend developers.
@taylorhorne1046
@taylorhorne1046 2 роки тому
you singlehandedly saved me from losing many hours of sleep last night. thank you king
@incorporealnuance
@incorporealnuance 2 роки тому
the thing I do with responsive font sizes before clamp, was too do calc(Xpx + Yvw), so that the pixel size was a sort of "soft" clamp of as low as the font could go, and would grow to fit & when zoom adjusted.
@JS-zm5se
@JS-zm5se 2 роки тому
Grateful I found this one.
@carlos126q
@carlos126q 3 роки тому
thanks bro! from chile!
@brankoh
@brankoh 4 роки тому
14:36 I think you forgot to save and that's why it doesn't change the title font-size when you zoom in/out. GREAT VIDEO!!! THANKS FOR SHARING YOU KNOWLEDGE!!!
@mikegogl
@mikegogl 3 роки тому
Thanks Kevin, I can always count on you.
@cedricluckett3874
@cedricluckett3874 3 роки тому
One way to deal about the calc() solution is to put more weight in the static part of the calculation: instead of doing (1wv + 0.25rem) you should try (0.25vw + 1rem). Try to find a good balance and you will find the solution for your element to fit every screen width. Of course using clamp() is the best solution. I'm only using it on the WordPress DIVI theme builder because it doesn't allow the min() max() clamp() to be use on inline CSS snippets (which sucks btw!!)
@georgeelliottphotography3602
@georgeelliottphotography3602 3 роки тому
Hi Kev, once again you are a genious. I have always hated using @media coding as it is an extra bit of coding you need to remember and to adjust. My hate of using @media also meant coding a seperate font size. But using clamp is brilliant in controlling font sizes for different browser sizes and does away wth using the tedious @media. Regards George
@sergeialekseenko3545
@sergeialekseenko3545 2 роки тому
Thank you man for your great job.Every video is quite helpful.👍How about prefer-color-schem exploration? Could you do it?
@amiralishoja
@amiralishoja Місяць тому
Perfect tech
@MarisaClardy
@MarisaClardy 4 роки тому
For three+ entries, Em/Rem/Percent/Pixels? For example, max(50em, 500px, 50%); 50 * 16 (if font size is 16) is bigger than 500px, but if font size is 9 pixels, 500px would be bigger.And then 50% could be bigger than either. That's a case where I could see it. Good for component classes (such as a card or something).
@teal4069
@teal4069 2 роки тому
You taught me about clamp. Now I am a happy as a clam
@sivavijay1208
@sivavijay1208 Рік тому
Yea, you hoped I learnt something. I learnt that I'm still a newbie in css whenever I see your channel
@vahidjamshidnejad9525
@vahidjamshidnejad9525 2 роки тому
great,thank you
@anasouardini
@anasouardini 4 роки тому
hey, can you do videos about ( is() matches() any() and math() ). i love your videos, keep it up
Flexbox or grid - How to decide?
18:51
Kevin Powell
Переглядів 685 тис.
A new approach to container and wrapper classes
25:27
Kevin Powell
Переглядів 234 тис.
Секретная разработка КГБ! Волга «Догонялка» на V8…
1:07:10
Мастерская Синдиката
Переглядів 2,3 млн
Responsive Typography with CSS Clamp
8:37
Tom Is Loading
Переглядів 30 тис.
Incredible scroll-based animations with CSS-only
32:23
Kevin Powell
Переглядів 297 тис.
6 simple typography tips to more professional looking sites
38:03
Kevin Powell
Переглядів 127 тис.
CSS Clamp Simplified, with Fluid Responsive Typography Examples
9:19
Deeecode The Web
Переглядів 2,3 тис.
Using the CSS Numeric Functions - min, max, calc, clamp, and minmax
10:57
Steve Griffith - Prof3ssorSt3v3
Переглядів 13 тис.
The secret to mastering CSS layouts
17:11
Kevin Powell
Переглядів 259 тис.
Avoid These 5 Awful CSS Mistakes
20:42
Kevin Powell
Переглядів 185 тис.
Web-заметки №7. CSS-функции min(), max(), clamp()
9:21
MaxGraph - cайты как страсть
Переглядів 6 тис.
Are you using the right CSS units?
6:30
Kevin Powell
Переглядів 435 тис.