Frontend News #19: CSS overscroll-behavior, scrollbar-gutter, text-grow Properties, & More

Do you know how to use overscroll-behavior and scrollbar-gutter CSS properties to keep your scrollbars consistent? Do you know how to get a top-down analysis of your entire CSS to pinpoint potential problems? Find out all about this and more in the next few minutes. This episode is sponsored by Piccalilli. More on their fantastic courses in a bit. First up, Bramus Van Damme explains how to prevent a page from scrolling while the dialog or a different interactive popup is open by using “overscroll-behavior: contain”. And there is actually one big change that is coming to Chrome that will make this feature even more effective and even better. In this demo, if I want to scroll this block of text here using the scroll wheel on my mouse, once I hit the end of the text and continue scrolling, I will actually scroll the outside window or the page itself. And this is almost never what we want. We actually want to prevent the overcroll and only scroll the element where our mouse currently is: this element right here, in this particular example. If I enable “overscroll-behavior: contain” now, when I get to the end of this scroll container, the scroll will not overspill into my parent container, and the page is not scrolling itself. So this is something that you want to enable for all your popups, for all your dialogs, and so on. But there is one problem with those. Namely, if the container where you set “overcroll-behavior” to “contain” doesn't have a scrollbar, the content is not overflowing, the feature will not be working at all, and the page will be scrolled. And that's precisely where the second demo comes in, this one. When I open the dialog, you will see that there is no scrollbar here, but there is a scrollbar on the page. So the page can be scrolled, but the dialog not. This is the change that I mentioned. In Chrome 144+, contain feature will contain scrolling even in containers where scrollbar is not present. So in previous versions of Chrome, if you try to scroll here, the entire page will scroll, but in Chrome 144 and beyond, this has been improved. And now, even though this container doesn't have a scrollbar, the scroll will not spill to the parent page if you set “overscroll-behavior” to “contain. ” As I'm using Chrome Canary here, “overscroll-behavior” is working. But if I open this demo in Chrome stable, which is not yet at version 144, this will not work. I will open it just side by side so I can show you exactly the difference. There we go. This is the dialog in Chrome Canary. If I try to scroll it, it's working as expected, scroll is contained within this popup. But if I move to Chrome stable and if I try to scroll here, you'll see that the page is scrolled, or rather, “overscroll-behavior: contain” is not containing the scrolling within this element. So, this change that is coming to Chrome will make “overcroll-behavior: contain” more intuitive. This episode is sponsored by Piccalilli and their amazing Black Friday deal. If you're not familiar with Piccalilli, you are definitely missing out. They are producing a ton of fantastic content on their blog, but more importantly, they have a few amazing courses that are on sale currently, and you can get them for amazing discounts. JavaScript for Everyone, Complete CSS, and Mindful Design. Let's open Complete CSS by Andy Bell. This is the course that you need to take if you want to take your CSS skills to the next level and beyond. Here you will learn how to write maintainable, organized, and flexible CSS. And that is exactly what you should be writing. The course is currently discounted, so you should get it right now before the deal expires. By the way, you should get all of their courses because they are all fantastic. I'm just showcasing this one in particular here. This course is split into eight modules with 51 lessons; those are really great, so you should take this course, and you should get it right now while the deal is still in effect. Not only will you take your JavaScript, design, and CSS skills to the next level, you will actually support a fantastic community resource, Piccalilli, because they are sharing a ton of wonderful stuff on their blog. If you're not reading it, well, you definitely should be. Thanks so much to Piccalilli for sponsoring. Next up, Zach Leatherman shares a tiny bit of CSS for stable scrollbar gutters. As you noticed, we are continuing with scrollbars here, and in this article, Zach explains the problem that is happening with interactive elements such as popups, related to scrollbars, or when a popup appears, the authors usually hide the scrollbar or set the “overflow” on the entire page to “hidden” so the user doesn't accidentally scroll the page. If the scroll bar is visible, as right here — because I have the system configured to always show scrollbars — now if I set “overflow” on the page to “hidden”, the entire layout will shift for the width of the scrollbar. There is an effective way to handle this or to avoid this by setting the “scrollbar-gutter” value to “stable”. I will quickly show you how this works. I'll open

Developer Tools, focus HTML element, and I will actually disable “scrollbar-gutter: stable” because Zach already is using this on his page. Once I do, if I set “overflow” to “hidden”, you will see that layout shifts. I will enable and disable it a few times so you can see how the page is jumping left and right. But once I set the scrollbar-gutter to stable, the browser will reserve the space for the scrollbar in the layout, meaning that if you enable or disable overflow, the layout will no longer shift. The “scrollbar-gutter” CSS property is in the Baseline, but it's newly available, so you might want to use the @supports at-rule to ensure that everything works as expected. Another thing that you might want to consider is adding this snippet into your reset stylesheet. Will you? Let me know in the comments. Next up, we have another fantastic snippet by Temani Afif, and this is the universal focus ring. Focus rings are absolutely crucial for accessibility, but this doesn't mean that you cannot style them or make them more effective, more beautiful. In this example, Temani shares how to utilize anchor positioning to move the focus from one point to the next one. I will run this demo, and I will hit the TAB key a number of times, just so you can see what the snippet does. The focus ring beautifully zooms into the first interactive element, and as I'm hitting the tab key, it doesn't jump straight from one point to the next one, but it's actually animated. So, it's pretty clear where the focus is moving. If you want to make your focus styles a little bit more interesting, consider this amazing snippet that utilizes anchor positioning by Temani Afif. Next up, I want to showcase Project Wallace. This is one of the best CSS analyzers out there, exactly as the title says. I will analyze one of my sites, CSS Stickers: https: stickers. css-weekly. com, and this will give me a nice overview of everything that's happening in the CSS on my website, from the number of lines to the file size, number of rules, selectors, and even declarations. It gives you a really nice top-down overview of what is happening in your CSS. And this can actually help you fix certain problems. If you see that size per rule sets are getting out of control, like here are, then you might want to address this and make those rules a little bit simpler. There are also a number of other things that you can check and verify to see if you can make your CSS more effective, more maintainable. For example, I do have some selectors that are quite complicated, and I should probably address those. So this project gives you a really nice overview of everything that is happening in CSS, and it will help you optimize your CSS, refactor it, and make it more maintainable and much easier to work with. Last up, we have a fantastic demo by Adam Argyle. Quite frankly, I wasn't even aware that this CSS feature exist, text-grow, but it's really interesting. If you edit or resize this text here, you will see that the size of the text is adjusting on the fly to take 100% of the container. Essentially, we're setting text-grow property to “per-line scale”. I think this is really cool, and this will give you a lot of interesting design possibilities once it's supported in the browsers. Currently, it's only in Chrome and only behind the flag Experimental Web Platform Features. So if you want to play with it, you will have to enable Experimental Web Platform Features Flag in Chrome, and then you can set text-grow to “per-line scale” or to “per-line scale-inline”. Let's try this one. Now this works a bit differently. Then we have “consistent scale”. Individual words are no longer changing size here. And the last option is “consistent scale-inline”. It works similarly to the last option. The words are no longer growing and shrinking, they are consistent. I really like this initial value, “per-line scale” — I think it will give us a lot of interesting design options when working with text. So check out this amazing demo by Adam Argyle. The text-grow seems to be a really cool upcoming CSS property. Thank you so much for your attention, and thanks so much to Piccalilli for sponsoring. By the way, grab their Black Friday deal. It's really worth it. My name is Zoran Jambor. I will see and hear you in a different text-grow property, or rather, in the next video.