How to Use the CSS clamp Method
Between December 2019 and April 2020 the browsers all added support for a new method in CSS called clamp( ).
This method lets you define a minimum, a default, and a maximum value for any numeric property value that you would use in CSS.
Code from video: gist.github.com/prof3ssorSt3v...
MDN reference: developer.mozilla.org/en-US/d...
CanIUse browser support: caniuse.com/#feat=mdn-css_typ...
Пікірлер: 45
Thank you Steve, It is nice to have someone like you that informs new features to us
Good alternative of media queries. Thanks maaan
Didn't know about clamp()! Think I will use it a lot! Thanks!
Than you so much, Steve!!! Learning so much from you
Very useful function and very well presented. Thank you.
you really did hard work to make videos for last technic 💙🌹
Great tip, thanks!
Thank you so much for this educational video, I learned so much. Your work is very awesome. I really appreciate your hard work and your effort.
that was so smooth. It is a shame that you have only 35k subs you should have at least 1M. Wish you the best. By the way, is there any chance of you collaborating with Traversy Media, he is taking sometime off and is looking for a collab.
@SteveGriffith-Prof3ssorSt3v3
3 жыл бұрын
One of my students sent him my channel link to have a look at. I've seen other people message him on Twitter about my channel. I would love to do a video for him.
@osamaa.h.altameemi5592
3 жыл бұрын
@@SteveGriffith-Prof3ssorSt3v3 I will message him as well. Really love the way you teach. Best of luck for you.
@SteveGriffith-Prof3ssorSt3v3
3 жыл бұрын
@@osamaa.h.altameemi5592 Thanks!
great tutorial. thank you so much
Thanks for your tutorial
Thank you so much for your great explanation!!. by the way what theme and font you use for the VSCode??
@SteveGriffith-Prof3ssorSt3v3
3 жыл бұрын
The font is Jetbrains Mono. A free developer font. The theme is Dark+ (default dark)
@abulfazlhaidary2002
3 жыл бұрын
@@SteveGriffith-Prof3ssorSt3v3 you're the best!
Thanks Steve!
Thanks u so much sir
Hey, Steve... Can you give me a quick explanation of how you came to the determination that 1000px wide calculated to 5vh? That sort of went over my head.
@SteveGriffith-Prof3ssorSt3v3
16 күн бұрын
5vh is 5% of the 1000px was what I was referring to. I was just giving 1000px as an arbitrary value of the height of the webpage.
@scottonanski4173
16 күн бұрын
@@SteveGriffith-Prof3ssorSt3v3 Oh. No wonder it didn't make sense to me. Thanks for taking the time to respond. I've been struggling with fluid typography for a few days now. I mean, I get it. But how to make it work in a real scenario has me struggling.
Thanks. Is it possible to use a 'reverse' clamp, i.e; going from a small number on a wide screen to a larger number on a smaller screen, for either % or vw? TIA.
@SteveGriffith-Prof3ssorSt3v3
Ай бұрын
You can use Calc to calculate a reverse scale for sizes
@rg-web-design
Ай бұрын
@@SteveGriffith-Prof3ssorSt3v3 Thank you. I am a total CSS newbie. If I want a VW of 8 going to 22 in a viewport of 1280px to 380px, could you please show me an example of using the Calc feature? Thank you.
Thanks
Clamp is fckn amazing !
💯🎖️🔥
I still don't see the point of clamp, shouldn't it be like @media? Where the text changes as viewport changes.
@SteveGriffith-Prof3ssorSt3v3
3 жыл бұрын
clamp lets you create a default and a possible range for a single value. @media lets you define multiple class selectors for a wide range of possible conditions - aspect ratio, width, pixel density, etc. Very different things.
hi.could u do a video on min() and max() too?
@SteveGriffith-Prof3ssorSt3v3
3 жыл бұрын
Sure. Please add that request to the comments here - kzread.info/dash/bejne/fneZ3MOxYti0Y8Y.html
Using viewport sizes for minimum and maximum doesn't make much sense to me, maybe a little for flex-basis. Shouldn't it be used like my size is 20vw but I can't control how much (large/small) that is so clamp it in between 50px and 100px or other units that are independent on viewport?
@SteveGriffith-Prof3ssorSt3v3
3 жыл бұрын
Sure you can do that absolutely. This was just meant as a simple example that is easy to visualize.
Why not my vscode doesn't support clamp🙄 it doesn't change the colour of clamp function when i hit save. . Please anybody help me
@SteveGriffith-Prof3ssorSt3v3
3 жыл бұрын
It has to do with whatever theme you are using. It's not a failure of VSCode.
@soorajkj1564
3 жыл бұрын
@@SteveGriffith-Prof3ssorSt3v3 i am using Monokai++ theme . but it's changing the color on scss and not in live css compiler. whatever it is not working on my google chrome and firefox.
@SteveGriffith-Prof3ssorSt3v3
3 жыл бұрын
@@soorajkj1564 it's fairly new. What versions of the browsers are you using. Check it against caniuse.com
@soorajkj1564
3 жыл бұрын
@@SteveGriffith-Prof3ssorSt3v3 I test before. It's showing my version is supported.
@SteveGriffith-Prof3ssorSt3v3
3 жыл бұрын
@@soorajkj1564 Then there must be a mistake in something that you typed.
Thanks Steve!