Smashing Newsletter: Issue #393

Editorial

We have a little surprise coming up for you tomorrow. We’ve been planning it for quite a bit of time, and we are finally ready to launch something smashingly new and a bit different in around 24h from now. Here’s a little teaser — can you guess what it could be? ;-)

Watch Smashing Magazine’s front page tomorrow for a big release. In other news, we are looking forward to seeing you in our smashing online meet-up on Figma next week, and we have just 3 seats left for the live UX training on “Smart Interface Design Patterns” (also with a video course) run by yours truly.

In the meantime, let’s dive into the shiny, beautiful world of CSS, everyone!

— Vitaly (@vitalyf)

1. Animated Theme Toggles

With the rise of night mode, night mode toggles have become an essential UI component on many websites. If you’re looking for a theme toggle that is not only easy-to-use but also a bit more distinctive than what you usually see on the web, Theme Toggles might have just what you’ve been looking for.

It’s a library of 12 animated toggles designed for switching between light and dark mode. The toggles are SVGs that are animated with CSS, making them scalable and, with only 1.5kb gzipped, extremely lightweight. From a sun rising and setting over the horizon to a simple but elegant lightbulb that can be switched on and off, the toggles are bound to cater for a delightful little surprise. (cm)

2. The Wasted Potential Of CSS Attribute Selectors

We often think of classes as the default selector type in CSS. However, the idea of treating attribute selectors as equal to classes has been proposed more widely recently.

In her article “The Wasted Potential Of CSS Attribute Selectors,” Elise Hein takes a closer look at the benefits and challenges that attribute selectors bring along and how they could create a better experience for users and developers alike. As Elise concludes, attribute selectors that are styled based on ARIA attributes could encourage more accessible markup, and styling based on custom data attributes makes it more robust and readable. Interesting considerations to rethink current best practices. (cm)

3. A Handy Use For Cascade Layers

When Michelle Barker was preparing a demo for an upcoming talk, it suddenly occurred to her that cascade layers would be the perfect solution to a problem she was having. And, well, it might be a problem you’ve experienced, too.

Michelle wanted to apply default styles to a grid of cards but she wanted those styles to appear at the bottom of the stylesheet, so that she could write all relevant code at the top, live during her talk. However, there were a few styles that consequently wouldn’t be applied, as they would have been overwritten by those further down.

Cascade Layers solved the problem. They let you specify the order of layers at the top of the file, so even if a style comes at the bottom of your stylesheet, it will be applied first if you want it to. A small trick that can save you a lot of headaches. (cm)

4. Upcoming SmashingConfs and Workshops

That’s right! We run online workshops on front-end and design, be it accessibility, performance, or design patterns. 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 — With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

On March 2 & 3, we’ll be unpacking the world of headless content management systems in a free online workshop supported by our dear friends at Storyblok. We’d love to see you there!

Go Headless with Your Favorite Framework — Join us for two days of fun and learning! (Check your timezone.)

As always, here’s a sneak peek of what’s coming up:

Universal Principles of Typography Masterclass UX
with Elliot Jay Stocks. Mar 2–16
Go Headless with Your Favorite Framework FREE
with Josefine, Facundo and Manuel. Mar 2–3
Interface Design Patterns UX Training UX
with Vitaly Friedman. Mar 10 – Apr 7
The Power of Storytelling UX
with Chiara Aliotta. Mar 14–28
Figma Auto Layout Masterclass UX
with Christine Vallaure. Mar 27
UX/UI Design & Figma Introduction UX
with Christine Vallaure. Apr 20–28
New Front-End Adventures, 2023 Edition Dev
with Vitaly Friedman. Apr 25 – May 9
Architecting Design Systems Workflow
with Nathan Curtis. May 11–19
Data Visualization Masterclass Dev
with Amelia Wattenberger. May 4–18
Deep Dive On Accessibility Testing Dev
with Manuel Matuzović. June 12–26
Smart Interface Design Patterns Video Course UX
9h-video + UX training on interface design with Vitaly Friedman
Jump to all workshops →

5. The Power Of CSS Blend Modes

CSS blend modes can create some cool effects, but what Scott Vandehey discovered even left him shocked at what they are capable of. Inspired by a Codepen of an Apple-inspired Pride clock, Scott created photo filters that apply engraving and halftone effects to a photo. With just a few lines of CSS.

Four layers make the magic happen. A bottom layer with a gradient, a second layer with the photo itself, a third layer that combines both, and, the final and most important layer, an extreme contrast filter that is applied to the entire container. It forces all shades of gray to either pure black or pure white to thicken and thin the lines for the engraving effect or to let the size of the dots grow or shrink to create the halftone effect. Great inspiration to start tinkering with blend modes. (cm)

6. Conditionally Adaptive CSS

Why should users wait for irrelevant desktop styles when they use your site on mobile? Vadim Makeev shares an interesting approach that might improve your site’s performance: split your CSS bundle into multiple parts and use the media attribute to define conditions where these parts are applicable.

For example, you could have a base file with universal styles, fonts, and colors plus one file each for mobile, tablet, and desktop, or different files to cater to your users’ preferences in regard to color scheme, pixel density, or reduced motion. The browser will still load all files, but, as Vadim found out, the files with the media attribute relevant to the current conditions will get loaded with the highest priority.

This affects not only loading priority but also the moment when the browser decides that it got everything it needs for rendering the page. Unfortunately, Safari doesn’t support the behavior. (cm)

7. 100 Days Of CSS

CSS is constantly evolving, and keeping track of everything new is almost impossible. To get up to speed with modern CSS, Manuel Matuzović challenged himself to learn something new about CSS in 100 days and share his learnings on his blog.

Some of the posts cover cutting-edge features, others are about things that have been around for quite a while already but that Manuel didn’t have much experience with yet. From container queries to the @property, from value processing to relative color syntax, the series is a treasure chest for everyone who wants to dive deeper into CSS — be it the fancy stuff or the solid base. (cm)

Join The Smashing Family

We have a steadily growing Smashing family. Wonderful people like you, who love good content and are an active part of our lovely web community. Smashing Membership is a friendly community for people who design and build the web. With discounts on books, workshops, conferences and goodies — for just 1 fancy coffee a month.

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

February 21, 2023 Smashing Newsletter: Issue #393

Previous Issues