Smashing Magazine - #393: Useful CSS Techniques

With CSS toggles, CSS attribute selectors, cascade layers, blend modes and conditionally adaptive CSS.Issue #393 Feb 21, 2023 View in the browser

Smashing Newsletter

Aazaard Smashing Friends,

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? ;-)

Topple loves fries and waffles

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.

Theme Toggles

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.

The Wasted Potential Of CSS Attribute Selectors

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.

A Handy Use For Cascade Layers

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:


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.

The Power Of CSS Blend Modes

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.

Conditionally Adaptive CSS

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)


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 ☕


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.

100 Days Of CSS

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)


8. New On Smashing Job Board


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

Key phrases

Older messages

#392: Design Inspiration From Remote Corners Of The Web

Tuesday, February 14, 2023

Design inspiration with music charts galaxy, interactive maps, historical illustrations and iconographic encyclopaedia.Issue #392 • Feb 14, 2023 • View in the browser Smashing Newsletter Goedemiddag

#391: Privacy and Security

Tuesday, February 7, 2023

Deceptive patterns, privacy UX, website tracking flowcharts, authentication UX and behavioral insights. Issue #391 • Feb 7, 2023 • View in the browser Smashing Newsletter He lā maikaʻi Smashing Friends

#390: Little Helpers

Tuesday, January 31, 2023

With AI helpers, toggle optimization, better SVGs, useful PDF tools, generating spreadsheets and automating meeting notes. Issue #390 • Jan 31, 2023 • View in the browser 💨 Smashing Newsletter Dear

#389: UX Playbooks

Tuesday, January 24, 2023

UX playbooks, methods, launch kits, product design resources and business guides for designers. Issue #389 • Jan 24, 2023 • View in the browser 💨 Smashing Newsletter Dobry wieczór Smashing Friends, We

#388: Open-Source Icons and Fonts

Friday, January 20, 2023

With open-source health and business icons, doodles and open-source fonts, free for personal and commercial use. Issue #388 • Jan 17, 2023 • View in the browser 💨 Smashing Newsletter Buenas tardes

You Might Also Like

NBA Shot Data, Inspirational Websites, Table of Contents, Navigation Redesign, AI Vocabulary

Friday, March 29, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 29 2024 A long read about NBA shot data aweebitofmapping.

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.