Smashing Magazine - #339: Modern CSS Techniques

With modern CSS, techniques for better CSS shadows, SVG icons, CSS Reset and even CSS pseudo commas. Issue #339 February 8, 2022 View in the browser 💨

Smashing Newsletter

Dear Smashing Friends,

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.

Upcoming Smashing Online Workshops

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.

Which SVG technique performs best for way too many icons?

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.

CSS Pseudo Commas

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.

Designing Beautiful Shadows in CSS

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.

Smashing Online Events
Frontend and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with personal and inclusive events.

As always, here’s an overview of our upcoming 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.

Using Position Sticky With CSS Grid

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.

Custom CSS Reset

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)


From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.


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.

Less Absolute Positioning With Modern CSS

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.

CSS in 2022

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)


9. New On Smashing Job Board


10. Recent Smashing Articles


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


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#338: UX & Front-End Tools

Tuesday, February 1, 2022

Little tools for card sorting, tree testing, gathering feedback, testing with screen readers and monitoring Core Web Vitals. Issue #338 • February 1, 2022 • View in the browser 💨 Smashing Newsletter

#337: Design Inspiration

Tuesday, January 25, 2022

With miniature illustrations, Japanese Fireworks, CSS art, generative art and a free Mac screensaver. Issue #337 • January 25, 2022 • View in the browser 💨 Smashing Newsletter Hyvää päivää Smashing

#336: Front-End Accessibility

Tuesday, January 18, 2022

With tips and advice from the community on improving accessibility by creating accessible and inclusive content and debunking accessibility myths together. Issue #336 • January 18, 2022 • View in the

#335: New CSS Adventures

Tuesday, January 11, 2022

With hand-picked CSS guides, inspiring talks, cross-browser tools and the latest CSS practices to dive into in 2022. Issue #335 • January 11, 2022 • View in the browser 💨 Smashing Newsletter Dear

#334: Getting Ready for 2022

Tuesday, January 4, 2022

With podcasts, mentorship, inspirational websites and self-reflecting yourself as the new year begins... Issue #334 • January 4, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends,

Platform Design, Naming Colors, Interactive Backdrop, Spreadsheet Concept, All at Once

Thursday, May 19, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 19 2022 A Growth-Focused Intro to Multi-Sided Platform

This Fashionable Luxury Retailer Just Launched a Home Category

Wednesday, May 18, 2022

Plus, the 9 best green paint colors designers turn to again and again (image) Architectural Digest AD PRO Logo pile of pillows outside LUXURY E-RETAILER MYTHERESA INTRODUCES A HOME CATEGORY—ZAHA HADID

116 / Designer starter resources, free loaders, notion templates and beautiful agency sites

Wednesday, May 18, 2022

Product Disrupt Logo Product Disrupt Half-Monthly May 2022 • Part 1 View in browser Image Designer Starter Pack Curated list of resources to learn Figma. Very useful to get started in Figma and handy

Unlock a New Member Benefit

Wednesday, May 18, 2022

Learn more about our free online courses ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Beyond sRGB, Rebellious Web Design, Shopify UX, Pixels vs Rems, Porsche Taycan

Wednesday, May 18, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 18 2022 Principles of Color? Going Beyond sRGB blog.jim-

Can Cat-Friendly Design Be Chic?

Tuesday, May 17, 2022

Plus, dive into 20 of the most inviting pools from the AD archive (image) Architectural Digest AD PRO Logo Guest room at the Casa Cody in Palm Springs, California HOW TO LAND—AND SURVIVE—YOUR FIRST

Your PR questions answered

Tuesday, May 17, 2022

Advice from Nora Wolf Welcome to the first edition of PR Questions with Nora. This new monthly newsletter feature was inspired by you! If you've attended one of our recent PR workshops, you likely

#353: Dashboards and Data Visualization

Tuesday, May 17, 2022

Dashboard design, better charts and how to make better decisions around data visualization. Issue #353 • May 17, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends, I had a dream

Roboto Flex

Tuesday, May 17, 2022

Hi Reader, these are my design and frontend picks this week. Highlights of the week Get the most of built-in interactivity of coded UI components - Design with fully interactive elements that make

Nice, Balanced Colors, Failed Projects, One Million People, CSS Selectors

Tuesday, May 17, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 17 2022 The Brand Identity the-brandidentity.com Balancing