February 8, 2022 Smashing Newsletter: Issue #339
This newsletter issue was sent out to 176,719 subscribers on Tuesday, February 8, 2022.
Editorial
Remember the times when we had to carefully prefix most new CSS properties? What about intricate techniques for styling components with absolute positioning and pseudo elements? And what about good ol’ padding-bottom workarounds for video containers and iframe?
When we write CSS today, many of these things seem to have become a remote sound of past times. We don’t need to rely on tricks with pseudo-elements that much; neither do we need to absolute positioning in many scenarios. With the upcoming cascade layers, :has selector and container queries, we can write better CSS that’s predictable and easy to maintain.
Oh, it’s a wonderful time to be writing CSS indeed!
In this newsletter, we cover some nifty CSS techniques that you might want to keep in mind for your projects. From dealing with SVG icons to better CSS shadows, CSS Grid techniques and even CSS pseudo commas, we hope you’ll find something useful here.
And if you do miss some good old-fashioned CSS, you’ll find plenty of useful techniques in Building Modern HTML Emails, an upcoming online workshop with Rémi Parmentier, along with plenty of front-end & UX workshops we’ve recently announced. Also, do join us at Smashing Meets, a free online event this Wednesday (Feb. 9) with sessions by Trine Falbe and Laura Kalbag on ethical design. We hope to see you there!
Happy CSSing, everyone! :)
— Vitaly (@smashingmag)
1. Tips And Techniques For SVG Icons
SVGs are a powerful and performant alternative to icon fonts. However, there are a myriad of options for implementing SVG icons on a page. Chen Hui Jing documented all of them in a blog post to give us a better overview of five different approaches — from implementing SVG as a pseudo-element via CSS to using them as a mask layer with mask-image.
But what if you’re dealing with a lot of icons, more than hundreds even? Tyler Sticka wanted to find out which technique performs best under such a stress test. As it turns out, it depends. Tyler found out that if you want all the features of SVG and your icons are well optimized, you can go for inline SVGs. If your icons are complex and poorly optimized or if you don’t need all the features that SVG brings along, image elements turned out to be most performant.
By the way, have you ever tinkered with the idea of applying a shadow to your SVG icons? Joel Olawanle explores two primary ways to do just that. One option uses the CSS filter() property, the other relies on an SVG <filter>. Happy SVG’ing! (cm)
2. CSS Pseudo Commas
Let’s say you have a list and want to spread your list items in a paragraph or in a statement. What you need are commas and ‘and’s in appropriate places. That’s exactly where pseudo commas come in. They combine your list items into sentences with proper punctuation and conjunction.
Of course, you could use JavaScript to tackle the task, but it’s possible to achieve the same thing with pure CSS, too, as Shadow Shahriar shows in a CodePen. To do so, he adds a pseudo-element after each list item, based on comma rules. The pseudo commas won’t alter the list structure, of course, they are only for decorative purposes. A useful little tip you might not need often, but that might come in handy every now and again. (cm)
3. Designing Better Shadows With CSS
Shadows are a fantastic option to create an illusion of depth and give your application a tactile, life-like feel. They can even help you direct the attention of your users. However, a lot of the shadows that we see on the web these days don’t make full use of their potential but rather resemble blurry borders. To help us do better, Josh W. Comeau lets us in on the secrets of creating more natural shadows.
In his article, Josh shares three core aspects that make shadows on the web a lot more realistic. He takes a closer look at how to ensure your shadows are cohesive across your application, how layering benefits a shadow, and how to tweak the colors to prevent your shadows from looking washed out. A must-read. (cm)
4. Upcoming Front-End & UX Workshops
You might have heard it: we run online workshops around frontend 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:
- Building Modern HTML Emails Dev
with Rémi Parmentier. Feb 24 – Mar 4 - Ethical Design Masterclass UX
Trine Falbe. Mar 1–15 - Architecting Design Systems Workflow
with Nathan Curtis. Mar 3–11 - Jump to all online workshops →
5. Positioning In CSS Grid
Have you ever tried to use position: sticky on a child of a grid container — a sidebar, for example — and wondered why it doesn’t work as expected? Ahmad Shadeed was in the same situation and decided to dig deeper. He found out that the issue isn’t an actual bug but an effect of a default CSS behavior. With a little tweak, you can achieve the sticky effect, as Ahmad shows.
Speaking of positioning in CSS Grid, another interesting read comes from Ryan Mulligan. Ryan has been experimenting with CSS Grid and alignment properties to create component layouts that contain multiple overlapping elements. He created some examples of where these grid properties come in handy, e.g. in hero containers, carousels or image boxes. (cm)
6. Modern CSS Resets
Historically, CSS resets were used to undo all browser default styles and ensure consistency across browsers. Luckily, today we’re living in times where CSS browser compatibility issues are much less likely. So, do we even need CSS resets anymore? Well, they might come in handy indeed.
Andy Bell came up with a tiny reset that removes default margins, makes images easier to work with, inherits fonts for inputs and buttons, and takes care of some other things that are bound to make a developer’s life easier. You can find the CSS reset on GitHub or NPM, and if you want to learn more about it, Andy also wrote a detailed breakdown of what each rule does.
Another modern CSS reset comes from Josh W. Comeau. His custom CSS reset includes all of the little tricks he discovered to improve both the user experience and the CSS authoring experience. It’s short but there’s a lot of powerful stuff packed into it. Josh also gives a line-by-line rundown of what the code does and why you might want to use it. Useful! (cm)
7. The Power Of Modern CSS
CSS has advanced significantly in the last years, and some of the solutions and approaches that once were best practices are worth reconsidering given what modern CSS is capable of. Take pseudo-elements, for example. For years, they have faithfully helped front-end developers implement creative designs. And while they still have an important place today, we can leave them behind in some scenarios, thanks to newer CSS properties. Whether it’s angled buttons, button wipes, or tiles with screen color overlays, in his article “Reducing The Need For Pseudo-Elements”, Marcel Moreau takes a closer look at examples where we don’t necessarily need pseudo-elements anymore.
Another practice that is worth a second thought is how we approach absolute positioning. Ahmad Shadeed started to notice use cases where position: absolute isn’t needed anymore — thanks to CSS Grid and Flexbox — and documented them in an article. Card overlays, card tags, and hero sections are just some of them. A great reminder of how powerful modern CSS is. (cm)
8. CSS In 2022
In 2021, the CSS Working Group has polished existing CSS features and specified lots of new ones, too. So, what can we expect from CSS this year? What features are worth learning these days? Closely monitoring the CSS Working Group Issue Tracker and following along in various Browser Vendor Issue Trackers, Bramus Van Damme made some predictions.
Bramus divides his predictions into three different groups: “The Hotlist” where cross-browser support can be expected this year and where learning about the features will pay off. “The ‘Not yet’ List” with features that won’t be supported in all browsers by the end of 2022 and that are most likely to appear behind feature flags. And, last but not least, the “Status Quo” list with features that still need broader browser support before being truly usable. Interesting insights into the current state of container queries, cascade layers, color functions, viewport units, overscroll behaviour, subgrid, and much more. (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.