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

preview_player
Показать описание
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!

#css #responsive #typography
--

Come hang out with other dev's in my Discord Community

---

Keep up to date with everything I'm up to

---

Help support my channel

---



---

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 YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Рекомендации по теме
Комментарии
Автор

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)

MelTurner
Автор

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 ✨

rc
Автор

I thought I was pretty good at CSS until I discovered your channel.

mintran
Автор

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

crstfrdrnt
Автор

Just love it!
Great for replacing some media query.
.row { width: clamp( min( 95%, 414px ), 80%, 1200px ); }
Thanks Kevin for making us better devs.

degagnemarc
Автор

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.

GineetMehta
Автор

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.

gosnooky
Автор

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)));

ukyo
Автор

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.

joeldcanfield_spinhead
Автор

Oh boy, I have an itch to go back to all my projects and use this! Thank you for such a clear explanation!

Автор

Started coding websites professionally about two years back. Your videos really helped me out back then and still do today :)

markrm
Автор

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!

shvideo
Автор

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 👍

sherwancaris
Автор

I can't thank you enough kevin! I have learned so much about css and responsive design from your channel !! Your videos are gems!

codingtime
Автор

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!

CipherosX
Автор

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 YouTube 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!!!

janelleschuh
Автор

I guess you can never know it all when it comes to CSS, thanks Kevin, you are doing a great job.

codellyson
Автор

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.

stefanielis
Автор

Wow! This is literally something I could use ALL the time when writing CSS! Thanks 😁!

patrickc.
Автор

Amazing the amount of media queries you could potentially save to write ! Thanks for sharing

rodrigonoales