I’ve been writing CSS for almost 20 years and I must say… every time I watch one of Kevin’s videos I learn something new and usually walk away with the sense of “oh cool!” Thanks for the awesome content!!

@unknown____.___

5 ай бұрын

😅 oh that's cool❣️

@user-kn8nl4lv5y

5 ай бұрын

Something new, but is it something necessary? These properties are unlikely to be useful.

@user-lq7xz1th4x

5 ай бұрын

❤

@unknownplayer0383

4 ай бұрын

yeah he saved me with this one. great vid

@suicidalbanananana

4 ай бұрын

Not trying to be rude but with 20 years experience it should be easy to tell that this guy is a poor teacher, please don't take to much of his advice on board because it's mostly bad advice.

New [to me ] properties are so exciting! Great vid!!

There is another important difference between the two. Overflow hidden will still allow you to programmatically scroll, which is useful for carousels etc. overflow clip does not

@MatiasMeno

6 ай бұрын

Why not use `overflow: scroll` then?

@leventebandi

6 ай бұрын

@@MatiasMeno if you programmatically scroll something and want to use scroll instead of hidden, you actually need to i troduce a lot of js and css, to handle user behaviour (as with 'scroll' the user can scroll as well) or to hide scrolbars and so on

@graysonpeddie

6 ай бұрын

Note however that not all carousel widgets are keyboard-accessible. For example, a plugin called"Ultimate Slider 3" for WordPress makes use of fake buttons (a div or a span or whatever) that does not have keyboard support built-in. No tabindex attribute, no role="button" for screen readers, no promise for implementing text alternative for fake buttons, no nothing. Just a cool-looking fake buttons that only users who can use a mouse can scroll through the slides in the carousel. Just imagine using a span tag for links and implementing the functionality to get to another page only using JavaScript instead of using an anchor tag with a standard href attribute. That "fake link" does not have support for those who rely on the keyboard interface.

@leventebandi

6 ай бұрын

@@graysonpeddie maybe you are right but I dont know what it does have to do with anything mentioned. There are a lot other slider solutions and plugins out there.

@graysonpeddie

6 ай бұрын

@@leventebandi I understand, but when anyone mentions carousels and decides to use it, I needed to point this out that not all carousel widgets (be it for WordPress or Drupal) are accessible for users who rely on the keyboard interface. That's all. :)

Thank you for the info, will make use of it for sure, good to finally have that overflow clip option 👍

Thank you so much Kevin, using clip instead of hidden fixed an overflow issue on my website that I've been dealing with for a year!

I was just practicing some transform and transitions effects to build some cool buttons using of course overflow: hidden; And now found this video by Kevin, put it immediately in practice and... worked as a charm, I've never heard before of this content: paint but it's fantastic! Thank you Kevin.

Perfect video and well-explained-better than a teacher! It really shows that you're doing this out of genuine passion. Thank you for sharing your invaluable knowledge. 🙌

Watched this today and then 2 hours later just happened to need this exact technique to fix a bug that came up...amazing how useful this is, thank you Kevin!

Thanks so much Kevin! This change my life 🙌

Thank you for this video! This overflow hidden was so annoying!

Very nice. Thanks for sharing. You should also be using `overflow-block` and `overflow-inline` instead of their `-y` and `-x` counterparts.

@KevinPowell

6 ай бұрын

Yeah, definitely. It's funny how for margin and padding I've mostly moved to using their logical properties, but a lot of other things I still haven't.

Been bouncing around these past three years with elementor workflow Wordpress and now bricks and guess what - your lessons are STILL invaluable. You fab man you!!

These tips are extremely useful for me

I'm just starting out with CSS and Kevin's style of teaching is excellent. He pauses at the right moments to allow the information to settle and goes over the basic terminology for those who may not have seen any of his other videos. Background knowledge I've noticed other creators seem to take for granted that their viewers will just know. Things have just clicked (no pun intended) after hearing and seeing Kevin's explanations. I'm extremely appreciative of his content. Thank you so much Kevin for being a considerate and patient teacher!

Wow, I can't believe I didn't know that. Thank you for sharing 🙏

Used clip today, thank you!

wow using clip instead if hidden actually fixed my website's issues! thank you so much for this video!

I am updating my css as I watch the video! awsome stuff!!

Kevin Powell - the video docs to CSS. Thank you very much!

Wow that contain rule is very interesting. Thank you!

thx for those updates!

Love these videos!

Thanks Kevin, you saved my day!

That is magic I never knew I needed but are actually super excited to use in my project. Thanks for sharing Kevin, informative as always. 🤗

Thank you my friend in friends.

Otima didática, muito bem explicado

Hey Kevin, Thanks for the great content! I wonder if you are using tailwind, and if no than why? Thanks

Great content as usual. Sidenote: both browser support links redirect to the same overflow page

Thanks!

Contain paint! Would be interesting to somehow do q benchmark on performance on using a lot of overflow hidden vs paint yo see if it does actually help with performance or does it hinder memory

God bless you, Kevin!

YEAH!!! You work with BEM 💥💥💥 It´s so underrated!!!

Overflow: clip -- woooaaah! that solved an very long overdue frustration. It is great to see these new properties. The difficulty is knowing when it ok to use them.

@suicidalbanananana

4 ай бұрын

It's not ok to use that here, the problem here resides in the HTML

This entire time, this feature is what I needed. Overflowing top and bottom by visible.

omg!! Kevin you just helped me so much with a bug i've been on and off trying to fix all day. my goodness.... Thank you! i am now going to sleep lol

some transform and transitions effects to build some cool buttons using of course overflow

amazing it was really helpful really problem solved....😌

Best css Channel in the world

cool, thanks

1:21 "A developer for browsers"? Don't you rather mean "A browser for developers"? 😅

@MaximilianoBernasconi

6 ай бұрын

had to rewind 3 times to confirm that he said it that way xD

@KevinPowell

6 ай бұрын

Didn't even catch that when I rewatched it after the final edit, lol

related to overflow, I recently have been working on modernizing the styling of a legacy application that has lots of dynamically generated content in s. I recently found setting an with container-type: inline-size; and then setting the height of the body to 100cqh seems to accomplish something that has been very challenging with s in the past. I would love to get your take on this approach.

I've encountered an issue with overflow hidden that made me switch to clip. I positioned a tabbable element in the corner of a card div and wanted to hide so it was the quarter of a circle. But when focused, it sprung back up! Clip fixed it fortunately

waaaaw u can be really creative with that

thanks!

Thank you Kevin. What is your browser?

ur awesome. Respect from India!!

Thanks

@KevinPowell

6 ай бұрын

Thanks so much!

This is a very great discovery 🔥🔥🔥🔥🔥🔥🔥🔥 but I wanna ask if we can have the overflow-x: clip; and still scrollable.

That might be a stupid question but could "contain: paint" replace virtual scrolls? (That concept where JavaScript dynamically loads and unloads DOM nodes to keep good performance no matter how far you scrolled in infinite list)

Great video, something I also only learned in the recent months. BTW there is still use case for hidden, but very-very niche. The difference between hidden and clip is, that with the latter anything outside of the boundaries of visible area are not accessible, while with hidden it can be scrolled into view with some js. I can see use cases for this but very rare and set circumstances.

My word, I love you Mr Powell. You always save my ass.

- "overflow-clip-margin" has been part of the spec for over 2 years and I'd never heard of it. - "overflow: clip" has been supported in all evergreen browsers for about a year ... and I'd never heard of it. Great video. Thanks! "In case you're watching this in the future." That's 100% of your audience. 😉

Ohh clip margin?! Can’t wait !

Brilliant. Love it. How do you find this stuff?

@KevinPowell

6 ай бұрын

I get to write and teach and explore CSS all day long, every day 😅

No matter what phase of career I'm in, I'll always cone back to Kevin to learn accessible and practical css.

@suicidalbanananana

4 ай бұрын

You mean bad practises and band-aids for poor HTML, be careful with this guys "lessons"

overflow-x: clip; is must have

1:18 - Actually, the first thing I noticed was HSL coloring. Interesting! 🧐

@axel-11

2 ай бұрын

IKR, who does that in 2024 and why not use oklch color space?

@axel-11

2 ай бұрын

Just kidding, HSL is fine too if you know it's limitations

This is not related but how can I give feedback to get more notification Feature for Desktop Browser . In Android Chrome Notification , they can show loading when asyn action is running . But In Deskop it can't .

05:48 there is other problem: you can't see right part of image on small width browser window

Hello @kevinpowell .. i always watxh your videos.. awesome work man . You once mentioned the api view transition but i dont think u rementioned or give more details.. its has more support now can you do video about it? ( the one that works with multi pages websites ) with only css

@ricardoroukoz

6 ай бұрын

@KevinPowell

I've used overflow: clip to force rendering cell from top without any scroll: .smth { overflow: clip; } .smth:hover { overflow: auto; } If you scroll it while hovering, clip renders top part when mouse goes away, but hidden renders middle.

@shayanzamani9907

6 ай бұрын

Can you please provide a pen to this kind of example or something like that? I'd like to know how it looks and works.

I'm wondering how did you achive this hero layout....?

Another method I'd come to like it to not feel preasured to always use the large generic types in places where you don't need them. For example: You have a type User with name, address, title,.. 20 other fields and then you have a function "printUserTitle(user: User)" that just concatinates the name and the title and logs it. Sometimes it may not needed to create a whole userobject to call this function. But then instead of doing printUser({name: "Bob", title: "Mr."} as User), you just change the type parameter of printUser to printUser(user: {name: string, title: string}). It will then be callable with any User object, but also with any object that contains only those two fields and will still warn you if it doesn't.

Thanks 👍 the only quirk I noticed so far is that overflow:clip messes up text-overflow:ellipsis. I.e. the ellipsis don't appear

@KevinPowell

6 ай бұрын

Yeah there are a few subtle differences :)

hello sir, can you please make video on landing page html where how can we manage space and font size with proper way for all sections.consider that some sections looks same but space diffrent. shoud we make all space and font size utilites for desktop and mobile? like i am confused about starting point for project setup for which way is proper for all this things. hope you understand love from india thank you!

overflow clip is deprecated so whats the alternate.

This guy never disappoints.

The links in description with browser support are the same

Why is safari so behind everything, apple should delete that already.

Hi Kevin, would your course be up to date and current?

@KevinPowell

6 ай бұрын

Everything in them is still current. My newest one (Beyond CSS) includes a lot of more modern CSS, whereas the others are older so don't include some of the more cutting edge stuff, but nothing is out of date in them :)

Any Idea how to allow box shadows outside of a overflow scroll ? I have a table with shadows on the rows and a scroll in x direction for overflowing columns (too many columns). Seems like there is no good way to achieve this in css alone. And thats very sad.

@rBroneak

4 ай бұрын

Similar situation here. I actually need to scroll on x but allow some drop-down and styled selects to pop out of the y-axis. I'm still not seeing a way to do this without .js. The example above is really nice but seems geared for more ornamental nontraditional box model designs. cc: @kevinpowell

@suicidalbanananana

4 ай бұрын

Both of you just want to avoid using overflow altogether, that will solve your problems. This guy is giving bad advice and charging for tutorials you can find for free in 5 seconds, be careful with what you learn from him.

YEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEES AWESOME THANKS

Any tips for overscroll: scroll to have the same behaviour as :clip but have overflow-y as visible

@KevinPowell

6 ай бұрын

Don't think that's possible 🤔

Thanks for sharing, Kevin! It feels like new css thinks every week! I have to admit that the name "contain: paint" is pretty counter-intuitive for me.

I have a related issue that maybe someone has experience with. It's `content-visibility` rather than `contain`, but they're both part of CSS Containment. I have `content-visibility: auto` on certain sections of various sites. Visually, this works perfectly fine. But the problem is that accessibility and SEO seem to be affected in unexpected ways, and aren't aware of elements until scrolled to. I forget the specifics, but it's along the lines of `aria-labelledby` not working if the referenced element is a child of a `content-visibility: auto` element until the page scrolls. I have to assume that accessibility shouldn't be affected this way and it's a bug in browsers.

@KevinPowell

6 ай бұрын

Hmm, I know aria-labelledby will work with content that has `display: none`, but I neverr tested it with content-visiblity. I could see how it could potentially cause an issue there. I don't know the context that you're using it in, so it could be a very good reason to use it, but unless you have something that's causing performance issues, you probably don't need it in the first place. More of "this can help fix and issue" than "just use it everywhere", at least from how I see it. Now, that might be the case here, and it might be breaking things for you, in which case you might have to remove it and find another solution...

Nice. Can 'clip' be used followed by 'hidden' to provide a fallback for browsers that don't support 'clip' yet?

@KevinPowell

6 ай бұрын

Use hidden first, not second :) The cascade means the last one wins, so start with the fallback, then the prefered option afterwards.

0:32 Dude I had JUST run into this issue the other day

@KevinPowell

6 ай бұрын

I ran into it on a site of mine awhile back and I thought I was going mad, took me forever to figure out the cause, and I'm still not 100% sure why it happens, lol.

What browser is that?

Is Safari the new IE?

Make next tutorial on "How to make layout/responsive layout for Dashboard And also different type of? Menu on left and content on write" Thank you ;)

So why use overflow: hidden and visible at all? Am I correct assuming this? Cheers.

@KevinPowell

4 ай бұрын

Overflow hidden can still be useful if you ever need the overflowing content to eventually be visible. Maybe you're using JS and moving the content in another way. With overflow hidden, the content is there, but hidden, so you can use JS or whatever to expose it. If you use clip, anything outside of that element is non-existent as far as the browser is concerned, so it'll never render.

@suicidalbanananana

4 ай бұрын

"overflow:hidden;" _means_ "overflow:auto; but hide the scrollbars" It DOES NOT mean "don't scroll" like this guy thinks it does Also what he says about clip is false too.

I remember that in table is problem with clip.

@suicidalbanananana

4 ай бұрын

Avoid clip and if you can overflow all together

👍

Dear sir, I was recommended by a few friends who advised me to use scss. Do you find scss necessary? Are you using scss?

@suicidalbanananana

4 ай бұрын

SCSS and SASS and alike are technically better because they are backwards compatible CSS-variable systems, they 'bake' a plain and simple CSS file, improving compatibility with older devices, which (unlike this fool) you should care about for at least another few years.

👌

@KevinPowell

6 ай бұрын

Thank you so much!

Work only on the chrome

hey could you make a video for alternative using overflow:overflow ? when u have a chance ?

@KevinPowell

6 ай бұрын

What do you mean? 🤔

@uprisingalpha2065

6 ай бұрын

@@KevinPowell sorry. i wanna know alternate for overflow:overlay :(

Hey Kevin, may I know what's the devtool you're using to get a different view on the browser? Or its an extension on VSCode?

@xorlop

6 ай бұрын

Kevin* 😭

@user-iu1xg6jv6e

6 ай бұрын

Celcius*

@DarrenbyDesign

6 ай бұрын

It's a good joke😂

@IFabixn

6 ай бұрын

It’s called PolyPane. 1:14 Look in the description.

@--bountyhunter--

6 ай бұрын

Fahrenheit*

A developer for browsers.

Have u written any book on CSS.......if yes then please tell me the name ❤❤❤🙏🙏🙏😍😍

@KevinPowell

6 ай бұрын

No, only online courses and my channel here :)

@akshajagarwal8814

6 ай бұрын

​@@KevinPowell.....❤please suggest me any nice book for css ,🙏🙏

I must be doing css wrong, because I'd be annoyed that it's overflowing at all and would try and make the image dictate the height of the container. Then again that's probably related to why I find grid so annoying :D

@suicidalbanananana

4 ай бұрын

Sounds like you are doing it right. It shouldn't be overflowing at all, it's a sign of poor HTML.

Знадобилось для використання, коли всередині елемент з position: sticky. Якщо батьківський має overflow: hidden - sticky не працює, а з значенням clip все ок.

But clip its not supported in safari :(

@KevinPowell

5 ай бұрын

Yes it is, overflow: clip has been supported since v16 :)

@TheVioArtsofficial

5 ай бұрын

@@KevinPowell great 🙏🏽🙏🏽🙏🏽🥰🥰🥰

1:23 I tried it at work last year. I wouldn't recommend PolyPane both because it's a CPU and memory hog and because when you go to a different tab and return to the original one, the original refreshes

@KevinPowell

6 ай бұрын

It's built using Chromium, so runs into some of the memory issues you get with that, plus has extra layers on top. I haven't run into problems because of that, but I also have a lot of RAM 😅

@kilianvalkhof

6 ай бұрын

Polypane isn't a general purpose browser, so using it as such isn't something I'm optimizing for. Tabs are your projects, and you can use the Browse panel for all your other resources. CPU and Memory are tied to the web page being show in Polypane. If it requires a bunch of CPU and memory, then each pane in Polypane has that requirement. That's why we also have different layouts with just a single pane.

Everytime you think you doing something right this legend comes align and changes the whole picture of CSS. Also can't wait for full support of subgrib

"Overflow" is one of the topics in CSS that just doesn't click to me. Why are things overflowing? Can a grand child element cause overflow, when the child element doesn't? Where is that overflow handled? Why do block and inline overflow behave different? Maybe this would be worth another video? ;)

@suicidalbanananana

4 ай бұрын

- Why are things overflowing? > Because thats how its designed, it's supposed to do that, cutting off content is not what you want 99.9% of the time (please understand that overflow:hidden is grossly misused & this tutorial doesn't help anyone) - Can a grand child element cause overflow, when the child element doesn't? > Yes but also no (technically the child will cause it even if it wont show) - Where is that overflow handled? > Depends on other properties like width/height/etc of the parent & child, to be blunt does it have space for it or not? if not there will be a scrollbar, so that can mean only 1 scrollbar on the parent, or one on parent and one on child - Why do block and inline overflow behave different? > This is like a 15 minute lecture of an answer, but it boils down to "because display:inline; is as misused as overflow:hidden;" so try and avoid both of them

Well, if you have an overlay and want to body behind it not to scroll, you still need to use "overflow: hidden" on the body to my knowledge

"A developer for browsers" 😂

If you have an overflow hidden around all your content, display: sticky won't work by the way.

@KevinPowell

6 ай бұрын

Yup, super annoying 😅

I am also a developer for browsers 😂