2 better alternatives to overflow: hidden
Вставка
- Опубліковано 15 чер 2024
- 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 UA-cam 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!
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!!
😅 oh that's cool❣️
Something new, but is it something necessary? These properties are unlikely to be useful.
❤
yeah he saved me with this one. great vid
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.
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.
New [to me ] properties are so exciting! Great vid!!
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!
Thank you for the info, will make use of it for sure, good to finally have that overflow clip option 👍
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!
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. 🙌
Very nice. Thanks for sharing. You should also be using `overflow-block` and `overflow-inline` instead of their `-y` and `-x` counterparts.
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.
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
Why not use `overflow: scroll` then?
@@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
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.
@@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.
@@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. :)
Thanks so much Kevin! This change my life 🙌
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. 🤗
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!!
Thank you for this video! This overflow hidden was so annoying!
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!
wow using clip instead if hidden actually fixed my website's issues! thank you so much for this video!
Wow, I can't believe I didn't know that. Thank you for sharing 🙏
Kevin Powell - the video docs to CSS. Thank you very much!
I am updating my css as I watch the video! awsome stuff!!
Wow that contain rule is very interesting. Thank you!
Used clip today, thank you!
Thanks Kevin, you saved my day!
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.
Great content as usual.
Sidenote: both browser support links redirect to the same overflow page
These tips are extremely useful for me
Hey Kevin,
Thanks for the great content!
I wonder if you are using tailwind, and if no than why?
Thanks
thx for those updates!
Love these videos!
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
YEAH!!! You work with BEM 💥💥💥 It´s so underrated!!!
This entire time, this feature is what I needed. Overflowing top and bottom by visible.
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.
It's not ok to use that here, the problem here resides in the HTML
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
Otima didática, muito bem explicado
God bless you, Kevin!
amazing it was really helpful really problem solved....😌
some transform and transitions effects to build some cool buttons using of course overflow
Thank you my friend in friends.
Best css Channel in the world
1:21 "A developer for browsers"? Don't you rather mean "A browser for developers"? 😅
had to rewind 3 times to confirm that he said it that way xD
Didn't even catch that when I rewatched it after the final edit, lol
Thanks!
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.
This is a very great discovery 🔥🔥🔥🔥🔥🔥🔥🔥 but I wanna ask if we can have the overflow-x: clip; and still scrollable.
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
ur awesome. Respect from India!!
Brilliant. Love it. How do you find this stuff?
I get to write and teach and explore CSS all day long, every day 😅
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.
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.
1:18 - Actually, the first thing I noticed was HSL coloring. Interesting! 🧐
IKR, who does that in 2024 and why not use oklch color space?
Just kidding, HSL is fine too if you know it's limitations
Thank you Kevin. What is your browser?
waaaaw u can be really creative with that
cool, thanks
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
@KevinPowell
thanks!
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)
Thanks
Thanks so much!
No matter what phase of career I'm in, I'll always cone back to Kevin to learn accessible and practical css.
You mean bad practises and band-aids for poor HTML, be careful with this guys "lessons"
My word, I love you Mr Powell. You always save my ass.
Thanks 👍 the only quirk I noticed so far is that overflow:clip messes up text-overflow:ellipsis. I.e. the ellipsis don't appear
Yeah there are a few subtle differences :)
overflow-x: clip; is must have
- "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. 😉
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.
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.
Ohh clip margin?! Can’t wait !
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.
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...
05:48 there is other problem: you can't see right part of image on small width browser window
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!
This guy never disappoints.
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 ;)
YEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEES AWESOME THANKS
Hi Kevin, would your course be up to date and current?
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 tips for overscroll: scroll to have the same behaviour as :clip but have overflow-y as visible
Don't think that's possible 🤔
Nice. Can 'clip' be used followed by 'hidden' to provide a fallback for browsers that don't support 'clip' yet?
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
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.
I'm wondering how did you achive this hero layout....?
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 .
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.
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
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.
The links in description with browser support are the same
hey could you make a video for alternative using overflow:overflow ? when u have a chance ?
What do you mean? 🤔
@@KevinPowell sorry. i wanna know alternate for overflow:overlay :(
Is Safari the new IE?
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?
Kevin* 😭
Celcius*
It's a good joke😂
It’s called PolyPane. 1:14
Look in the description.
Fahrenheit*
So why use overflow: hidden and visible at all? Am I correct assuming this? Cheers.
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.
"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.
overflow clip is deprecated so whats the alternate.
What browser is that?
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
Sounds like you are doing it right.
It shouldn't be overflowing at all, it's a sign of poor HTML.
Have u written any book on CSS.......if yes then please tell me the name ❤❤❤🙏🙏🙏😍😍
No, only online courses and my channel here :)
@@KevinPowell.....❤please suggest me any nice book for css ,🙏🙏
I remember that in table is problem with clip.
Avoid clip and if you can overflow all together
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
Dear sir,
I was recommended by a few friends who advised me to use scss.
Do you find scss necessary? Are you using scss?
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.
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
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 😅
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.
Знадобилось для використання, коли всередині елемент з position: sticky. Якщо батьківський має overflow: hidden - sticky не працює, а з значенням clip все ок.
Work only on the chrome
Why is safari so behind everything, apple should delete that already.
👍
👌
Thank you so much!
"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? ;)
- 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
A developer for browsers.
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" 😂
But clip its not supported in safari :(
Yes it is, overflow: clip has been supported since v16 :)
@@KevinPowell great 🙏🏽🙏🏽🙏🏽🥰🥰🥰
If you have an overflow hidden around all your content, display: sticky won't work by the way.
Yup, super annoying 😅
I am also a developer for browsers 😂