2 better alternatives to overflow: hidden

Подписаться 902 тыс.

Просмотров 147 тыс.

50% 1

Looking to up your CSS Game? Free & Premium courses 👉 kevinpowell.co/courses?...
Overflow hidden is one of those features that seems like it should work in a very specific way, but it comes with a few strange side effects that can be incredibly frustrating and hard to fix.
The powers who be have realized that there should probably be a better solution, and we have one with `overflow: clip`, which is basically a better version of `overflow: hidden`. I honestly don’t know if we need to bother with hidden at all anymore.
Depending on the use case, we might want to use `contain: paint` instead though, which comes with some extra limitations, but also potential improvements to performance.
🔗 Links
✅ Polypane: polypane.app/?ref=kevin (this is an affiliate link, so if you do purchase after visiting through this link, it would also help support my channel)
✅ Killian’s article on overflow: clip: kilianvalkhof.com/2022/css-ht...
✅ Browser support for clip: caniuse.com/mdn-css_types_ove...
✅ Browser support for contain: paint: caniuse.com/mdn-css_types_ove...
✅ My CSS-only parallax video: • True parallax with CSS...
✅ My courses: kevinpowell.co/courses?...
⌚ Timestamps
00:00 - Introduction
00:10 - The problems overflow: hidden can cause
01:15 - Target what’s causing the overflow first
04:40 - overflow: clip
06:20 - overflow-clip-margin
07:52 - courses!
08:20 - contain: paint
#css
--
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
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 RU-vid channel, make sure to follow me on Instagram and Twitter.
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!

Опубликовано:

4 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 186

@aaronsarnat 4 месяца назад

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____.___ 4 месяца назад

😅 oh that's cool❣️

@user-kn8nl4lv5y 4 месяца назад

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

@user-lq7xz1th4x 4 месяца назад

❤

@unknownplayer0383 3 месяца назад

yeah he saved me with this one. great vid

@suicidalbanananana 2 месяца назад

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.

@antonaxelsson4246 4 месяца назад

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!

@daviddwq4513 4 месяца назад

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.

@clevermissfox 4 месяца назад

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

@GilGoldshlager 4 месяца назад

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

@user-js5jv1yz5u 8 дней назад

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

@larab4999 4 месяца назад

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!

@iwolfman37 4 месяца назад

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

@dogoku 4 месяца назад

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 4 месяца назад

Why not use `overflow: scroll` then?

@leventebandi 4 месяца назад

@@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 4 месяца назад

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 4 месяца назад

@@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 4 месяца назад

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

@saufth 4 месяца назад

Thanks so much Kevin! This change my life 🙌

@jenniferward6821 3 месяца назад

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

@dimitrynevermind7804 4 месяца назад

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

@revenge425 4 месяца назад

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

@alvaroprietovideos 4 месяца назад

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

@PascalHorn 4 месяца назад

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

@emmtalarico3491 3 месяца назад

Used clip today, thank you!

@TheMetalMag 4 месяца назад

thx for those updates!

@k16e 4 месяца назад

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

@jikochi 4 месяца назад

Thanks Kevin, you saved my day!

@leogonzalez3112 4 месяца назад

Wow that contain rule is very interesting. Thank you!

@MichaelRichins 4 месяца назад

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

@KevinPowell 4 месяца назад

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.

@VedanthKUditya 26 дней назад

These tips are extremely useful for me

@nibo753 4 месяца назад

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

@fer.barrios 4 месяца назад

Love these videos!

@Mein_Kopf_tut_mir_weh 3 месяца назад

God bless you, Kevin!

@codewithpedro 4 месяца назад

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

@treyrader 3 месяца назад

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

@JlNGLEZ 4 месяца назад

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

@domenicociccarelli3734 4 месяца назад

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

@wpeasy 4 месяца назад

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 2 месяца назад

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

@MrAngeloDy 10 дней назад

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

@leventebandi 4 месяца назад

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.

@al2yours829 23 дня назад

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

@jorgeahumada1885 3 месяца назад

Thanks!

@memaimu 4 месяца назад

Thank you my friend in friends.

@fabriciosantuchi6424 22 дня назад

Otima didática, muito bem explicado

@user-re8lt2gy3g 4 месяца назад

Best css Channel in the world

@lifeisniche 4 месяца назад

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

@joshmeurer4956 4 месяца назад

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.

@akramilyas6030 4 месяца назад

waaaaw u can be really creative with that

@zhenox_ 4 месяца назад

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

@ambuj.k 4 месяца назад

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

@suicidalbanananana 2 месяца назад

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

@TVGameDE 4 месяца назад

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

@MaximilianoBernasconi 4 месяца назад

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

@KevinPowell 4 месяца назад

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

@uimonk 4 месяца назад

ur awesome. Respect from India!!

@chillside 4 месяца назад

thanks!

@kirillriman3611 2 месяца назад

cool, thanks

@QwDragon 4 месяца назад

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 4 месяца назад

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.

@rezalaal 3 месяца назад

Thank you Kevin. What is your browser?

@bronzekoala9141 4 месяца назад

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.

@mvonballmo 4 месяца назад

- "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. 😉

@_sound.it_gh 4 месяца назад

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

@jugibur2117 4 месяца назад

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.

@MaxDaten 4 месяца назад

Thanks

@KevinPowell 4 месяца назад

Thanks so much!

@AndyInTheUK 4 месяца назад

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

@KevinPowell 4 месяца назад

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

@Atractiondj 4 месяца назад

overflow-x: clip; is must have

@ricardoroukoz 4 месяца назад

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 4 месяца назад

@KevinPowell

@clevermissfox 4 месяца назад

Ohh clip margin?! Can’t wait !

@babakfp 4 месяца назад

YEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEES AWESOME THANKS

@iUmerFarooq 4 месяца назад

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

@thevishalvadher 4 месяца назад

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!

@hyperpug2898 4 месяца назад

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)

@m12652 4 месяца назад

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 4 месяца назад

Yeah there are a few subtle differences :)

@PhoticsTV Месяц назад

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

@axel-11 Месяц назад

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

@axel-11 Месяц назад

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

@shgysk8zer0 4 месяца назад

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 4 месяца назад

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

@ThanHtutZaw3 3 месяца назад

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 .

@parenteseswebdev 4 месяца назад

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

@KevinPowell 4 месяца назад

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

@funkologie 2 месяца назад

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

@RandomGeometryDashStuff 4 месяца назад

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

@aashishsingla2499 4 месяца назад

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 3 месяца назад

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 2 месяца назад

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.

@danielghirasim2544 4 месяца назад

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

@KevinPowell 4 месяца назад

Don't think that's possible 🤔

@hardikpatelhdhe 4 месяца назад

This guy never disappoints.

@erdUha 4 месяца назад

The links in description with browser support are the same

@yawpov 3 месяца назад

overflow clip is deprecated so whats the alternate.

@avi12 4 месяца назад

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

@KevinPowell 4 месяца назад

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.

@SurfsUpSeth 4 месяца назад

What browser is that?

@Woeden 4 месяца назад

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

@javierolazaran7227 2 месяца назад

Is Safari the new IE?

@lunedamkingsway2276 4 месяца назад

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

@KevinPowell 4 месяца назад

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

@uprisingalpha2065 4 месяца назад

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

@KevinPowell 4 месяца назад

What do you mean? 🤔

@uprisingalpha2065 4 месяца назад

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

@benjmainhunt9950 4 месяца назад

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

@sumerianbrother 3 месяца назад

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

@KevinPowell 3 месяца назад

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 2 месяца назад

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

@DzikiMoronHackshield 4 месяца назад

I remember that in table is problem with clip.

@suicidalbanananana 2 месяца назад

Avoid clip and if you can overflow all together

@nickwoodward819 4 месяца назад

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 2 месяца назад

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

@DerPipo 4 месяца назад

"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 2 месяца назад

- 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

@HuyNguyen-mr9to 4 месяца назад

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 2 месяца назад

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.

@martunjaykumar752 4 месяца назад

👍

@dennischow7784 4 месяца назад

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 4 месяца назад

Kevin* 😭

@user-iu1xg6jv6e 4 месяца назад

Celcius*

@DarrenbyDesign 4 месяца назад

It's a good joke😂

@IFabixn 4 месяца назад

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

@--bountyhunter-- 4 месяца назад

Fahrenheit*

@akshajagarwal8814 4 месяца назад

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

@KevinPowell 4 месяца назад

No, only online courses and my channel here :)

@akshajagarwal8814 4 месяца назад

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

@rujor 4 месяца назад

👌

@KevinPowell 4 месяца назад

Thank you so much!

@mostwanted1747 4 месяца назад

Work only on the chrome

@ktytar 4 месяца назад

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

@canarymultimedia 4 месяца назад

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

@avi12 4 месяца назад

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 4 месяца назад

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 4 месяца назад

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.