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

  • @muhammedozalp
    @muhammedozalp3 жыл бұрын

    Thank you Steve, It is nice to have someone like you that informs new features to us

  • @pritamchatterjee945
    @pritamchatterjee9453 жыл бұрын

    Good alternative of media queries. Thanks maaan

  • @DiegoAlencar8
    @DiegoAlencar83 жыл бұрын

    Didn't know about clamp()! Think I will use it a lot! Thanks!

  • @bleulola
    @bleulola3 жыл бұрын

    Than you so much, Steve!!! Learning so much from you

  • @shvideo1
    @shvideo12 жыл бұрын

    Very useful function and very well presented. Thank you.

  • @khaledoghli1894
    @khaledoghli18943 жыл бұрын

    you really did hard work to make videos for last technic 💙🌹

  • @codydaniels9430
    @codydaniels94303 жыл бұрын

    Great tip, thanks!

  • @esraamohamed5601
    @esraamohamed5601 Жыл бұрын

    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.

  • @osamaa.h.altameemi5592
    @osamaa.h.altameemi55923 жыл бұрын

    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

    @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

    @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

    @SteveGriffith-Prof3ssorSt3v3

    3 жыл бұрын

    @@osamaa.h.altameemi5592 Thanks!

  • @joevidal8902
    @joevidal8902 Жыл бұрын

    great tutorial. thank you so much

  • @shxdo3712
    @shxdo371211 ай бұрын

    Thanks for your tutorial

  • @abulfazlhaidary2002
    @abulfazlhaidary20023 жыл бұрын

    Thank you so much for your great explanation!!. by the way what theme and font you use for the VSCode??

  • @SteveGriffith-Prof3ssorSt3v3

    @SteveGriffith-Prof3ssorSt3v3

    3 жыл бұрын

    The font is Jetbrains Mono. A free developer font. The theme is Dark+ (default dark)

  • @abulfazlhaidary2002

    @abulfazlhaidary2002

    3 жыл бұрын

    @@SteveGriffith-Prof3ssorSt3v3 you're the best!

  • @chikatikah3838
    @chikatikah38383 жыл бұрын

    Thanks Steve!

  • @Youssef-lv6wp
    @Youssef-lv6wp3 жыл бұрын

    Thanks u so much sir

  • @scottonanski4173
    @scottonanski417318 күн бұрын

    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

    @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

    @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.

  • @rg-web-design
    @rg-web-designАй бұрын

    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

    @SteveGriffith-Prof3ssorSt3v3

    Ай бұрын

    You can use Calc to calculate a reverse scale for sizes

  • @rg-web-design

    @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.

  • @_.sunnyraj._
    @_.sunnyraj._3 жыл бұрын

    Thanks

  • @perseveranse
    @perseveranse2 жыл бұрын

    Clamp is fckn amazing !

  • @zimani7g473
    @zimani7g4733 жыл бұрын

    💯🎖️🔥

  • @kareemradaideh7616
    @kareemradaideh76163 жыл бұрын

    I still don't see the point of clamp, shouldn't it be like @media? Where the text changes as viewport changes.

  • @SteveGriffith-Prof3ssorSt3v3

    @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.

  • @mrx-qi8th
    @mrx-qi8th3 жыл бұрын

    hi.could u do a video on min() and max() too?

  • @SteveGriffith-Prof3ssorSt3v3

    @SteveGriffith-Prof3ssorSt3v3

    3 жыл бұрын

    Sure. Please add that request to the comments here - kzread.info/dash/bejne/fneZ3MOxYti0Y8Y.html

  • @rabindrajoshi9258
    @rabindrajoshi92583 жыл бұрын

    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

    @SteveGriffith-Prof3ssorSt3v3

    3 жыл бұрын

    Sure you can do that absolutely. This was just meant as a simple example that is easy to visualize.

  • @soorajkj1564
    @soorajkj15643 жыл бұрын

    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

    @SteveGriffith-Prof3ssorSt3v3

    3 жыл бұрын

    It has to do with whatever theme you are using. It's not a failure of VSCode.

  • @soorajkj1564

    @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

    @SteveGriffith-Prof3ssorSt3v3

    3 жыл бұрын

    @@soorajkj1564 it's fairly new. What versions of the browsers are you using. Check it against caniuse.com

  • @soorajkj1564

    @soorajkj1564

    3 жыл бұрын

    @@SteveGriffith-Prof3ssorSt3v3 I test before. It's showing my version is supported.

  • @SteveGriffith-Prof3ssorSt3v3

    @SteveGriffith-Prof3ssorSt3v3

    3 жыл бұрын

    @@soorajkj1564 Then there must be a mistake in something that you typed.

  • 3 жыл бұрын

    Thanks Steve!