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,

You Might Also Like

The Design World’s 19 Most Beloved Travel Destinations

Thursday, March 28, 2024

Plus, designers share the AD projects that still inspire View in your browser | Update your preferences Architectural Digest AD PRO Logo WILD, WHIMSICAL MEADOW GARDENS ARE THE LANDSCAPE TREND TO WATCH

How Balsamiq uses AI

Thursday, March 28, 2024

A peek into our ChatGPT conversations ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Adobe AI, Remote, Stripe Sessions, Node.js Redesign, light-dark()

Thursday, March 28, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 28 2024 Defining experience quality in large language

Are Photorealistic Renderings Worth It?

Wednesday, March 27, 2024

Plus, the go-to garden stores of top designers and landscaping pros View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Home Decor, Lamp, Desk, Furniture,

CSS Variable Groups, Layout Rhythm, Animate Borders, Parallel Lives, Visualization Techniques

Wednesday, March 27, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 27 2024 Proposal: CSS Variable Groups lea.verou.me CSS

The History of Ikat

Tuesday, March 26, 2024

Plus, Kips Bay Decorator Show House New York announces designer lineup View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Art, and Painting SAVE YOUR

#449: UX Research

Tuesday, March 26, 2024

UX research impact, research invite emails, research without access to users, and UX research methods cheat sheet. Issue #449 • Mar 26, 2024 • View in the browser Smashing Newsletter Joh-eun jeonyeog-

Progress Indicator, Lissajous Curves, Pixel to Ink, Azulejo, Mac at 40

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 26 2024 Front-End solution: progress indicator piccalil.

Responsive Font Size, Icon Design, text-emphasis, Inclusive Sans, Accessible Forms

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 25 2024 A formula for responsive font-size jameshfisher.

👏 Impressive Dashboard Design Files + 🏆 Challenge Updates

Tuesday, March 26, 2024

🌟 Brighten Your Day with UpLabs' Design News! Firstly, let's congratulate Syndell, the winner of our latest 📝 Todoist Dashboard Redesign Challenge! Congratulations!! Secondly, don't forget