November 30, 2021 Smashing Newsletter: Issue #329
This newsletter issue was sent out to 177,392 subscribers on Tuesday, November 30, 2021.
Editorial
Good ol’ CSS! It might seem that CSS is quite simple, with a few style declarations here and there, and a few styles to layout components on the page. However, when it comes to micro-interactions and scalability, CSS often isn’t easy to tame.
In this newsletter, we look into some of the unusual issues when using CSS, and how we can solve them for good — from hover glitches to better CSS shadows, all the way to scrolling chaining. We hope you’ll find some useful nuggets in here.
On another note, do you have anything planned for next Monday? We’d love to welcome you to another session of Smashing Meets on Dec. 6, 2021 where we’ll all be discussing all things accessibility together with Christopher Patnoe, Harris Schneiderman, Manuel Matuzović, and yours truly.
For those of you screaming for more, please mark your calendars for A Smashing Hour with Henri Helvetica on Dec. 15, 2021 where we’ll be chatting about what’s happening on the web, especially in terms of performance.
We also have our ongoing front-end workshops, or even join us at the in-person SmashingConf SF 2022 that’s going to take place on March 28–31, 2022. Wherever it is that we meet, it’ll be a great pleasure to see you there!
— Vitaly
1. A CSS Library For Text-Based UIs
If you have a sweet spot for MS-DOS-like UIs, well, good news, Vinicius Reif Biavatti created TuiCss, a CSS components library that is bound to wake some sweet memories. Based on the good ol’ ASCII table, it uses ultra-contrast colors and reduced effects to create the retro effect.
Don’t let the retro look fool you, though: The library has everything you might need to create modern UIs — radio buttons, dropdowns, input, navbars, panels, and much more. A grid enables you to create responsive designs, of course, and, if you’re feeling nostalgic, a table grid is included, too. A beautiful combination of old and new. (cm)
2. Creating Realistic CSS Shadows
Creating lush, realistic CSS shadows can be quite a challenge. One of the tricks to create shadows that feel more natural than what you typically see comes from Josh W Comeau. He recommends to stack 5 or 6 individual shadow layers and customize each one of them with different values for x/y offset, blur radius, spread, color, and opacity. So far so good, but which values should you use for all those settings? Josh’s Shadow Palette Generator helps you figure it out, without worrying about the hard numbers.
The Shadow Palette Generator functions at a more abstract level than similar tools. So instead of fiddling with precise values, you can focus on the “feel” of the shadow instead. Do you want it to be deep and prominent, or light and subtle? And should it be tight and crispy, or soft and blurry? The sliders help you find the sweet spot.
To give you maximum control over how elevated you want an element to appear, the generator outputs a set of three cohesive shadows instead of a single one, with each one of them representing different elevations. The output uses CSS Custom Properties by the way, so you can easily reuse the shadows throughout your application. One for the bookmarks. (cm)
3. Improving Scrolling Performance
One line of CSS to make Google’s data grid scroll 10x faster? Sounds too good to be true? Well, Johan Isaksson did just that. Frustrated by major scroll lag when displaying a larger dataset in Google Search Console to see which external websites link to his site, Johan decided to get to the root of the issue.
Clicking around on the Elements panel in DevTools, Johan found 16,000+ DOM elements that are used to display just 500 rows of information, all of them laid out when you scroll the grid. To fix the issue, Johan added contain: strict to the <table> on the Elements panel, specifying that it will not affect the layout or style of other elements on the page. The result is a major performance improvement: Scrolling reached almost 60 FPS instead of 6–7. A fantastic example of how powerful CSS is. (cm)
4. Upcoming Front-End & UX Workshops
You might have heard it: we run online workshops around front-end and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
As always, here’s an overview of our upcoming workshops:
- Design Management Masterclass UX
with Yury Vetrov. Dec. 1–15 - Designing The Perfect Navigation UX
with Vitaly Friedman. Dec. 2–3 - Accessible Front-End Patterns Masterclass Dev
with Carie Fisher. Jan 20 – Feb 3 - Jump to all online workshops →
5. Smoother Hover Effects
We’ve all come across a button that shows a weird flickering glitch when you hover over it instead of a smooth animation effect. Eric Wätke shares a handy little tip to prevent this from happening: Put all the styles you want to animate on hover in a pseudo-element, not in the element itself.
As Eric points out, this not only prevents hover glitches but it also looks better. The technique works with regular hover animations but also with boop animations. By the way, if you haven’t heard of boop animations yet, be sure to check out Josh W Comeau’s article. He describes how to create a hover effect that “flicks” the element without permanently changing its rotation to create a dynamic and surprising effect. (cm)
6. Handy CSS Pseudo-Classes
Pseudo-classes make it possible to apply styling to an element in relation to external factors like the status of its content, the position of the mouse, or the history of the navigator. And, well, there are quite a lot of pseudo-classes out there. Stefan Judis collected some interesting ones that you might not have heard of yet in a Twitter thread.
:autofill, for example, matches when an <input> element has its value autofilled by the browser and stops matching if the user edits the field. :default selects form elements that are the default in a group of related elements. And :fullscreen lets you automatically adjust the size, style, or layout of content when elements switch back and forth between full-screen and traditional presentations. For more handy pseudo-classes, be sure to check out Stefan’s thread or take a look at the MDN Web Docs. (cm)
7. Preventing Scroll Chaining
Imagine you have an element with position: fixed. A modal dialog that is positioned in the center of the viewport, for example, with the actual web page content underneath it. Now, if the modal has scrolling and you have reached its bottom boundary, the browser will continue scrolling on the main page’s content. It’s the default behavior and, unfortunately, quite confusing. Luckily, scroll chaining, as the unwanted effect is called, can be fixed with CSS. The magic ingredient: overscroll-behavior.
If you aren’t familiar with the overscroll-behavior property yet, Ahmad Shadeed summarized everything you need to know about it and, of course, how to use it to prevent scroll chaining. Possible use cases are not only modals but also mobile navigation with long lists, side navigation, chat components, and horizontal lists. A useful property that elegantly solves an issue that required quite some hacking around years ago. (cm)
8. Line Wrap Balancer, Remastered
Web browsers follow a simple pattern when it comes to laying out text: one word after the other, and when there’s no more room, words will wrap onto a new line. While this might be a good solution in most cases, it doesn’t guarantee an even distribution of words or prevent a single word from wrapping onto a new line. So if you’re into typographic details like these, there’s no getting around a text balancer. Text balancers help eliminate typographic widows and distribute words more evenly over multiple lines. However, they aren’t perfect either.
Unhappy with the status quo, Daniel Aleksandersen decided to improve the situation and make the open-source New York Times Text Balancer even better. The result is a fast text wrap balancer for multi-line headlines that wraps text more evenly across lines and reduces uneven line lengths. It rebalances text on device orientation changes or when the window or element is resized. If you want to learn more about the changes and improvements that Daniel made, be sure to also check out the accompanying blog post. A handy fallback until browsers will finally support CSS text-wrap: balance. (cm)
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.