June 2, 2026 Smashing Newsletter: Issue #561
This newsletter issue was sent out to 176,289 subscribers on Tuesday, June 2, 2026.
Editorial
Just a few years ago, I assumed we had almost everything we ever needed from CSS. But CSS keeps evolving, becoming richer and more advanced. This newsletter is dedicated to just that! Useful CSS techniques, new CSS features, and a few helpful little strategies to make CSS clean and lean. We hope you’ll find it useful!
While most folks tend to agree that digital sustainability is an important topic, it is also difficult to see what we (as individual contributors) can do to make a difference ourselves. Join in on our upcoming Smashing Meets Sustainability online session, where we’ll share a few hours of knowledge, inspiration, and practical learning!
We are getting ready for SmashingConf Antwerp 2026 🇧🇪, our conference on design & UX, for designers and UI engineers who love the web. Also coming up are online workshops — a friendly way to learn practical, actionable insights from experts:
- Giving Your Users a Voice in Every Decision with AI Free workshop with Paul Boag. June 9
- Design Patterns For AI Interfaces UX
with Vitaly Friedman. June 16–30 - The Modern UX Practitioner UX
with Paul Boag. June 24 – July 2 - Designing Complex UIs in the Age of AI (Without Making Them Worse) Free workshop
with Vitaly Friedman. July 9 - Design Patterns For Complex UIs and Enterprise UX UX
with Vitaly Friedman. Sep 2–3 - Naming Design Systems DS
with Samantha Gordashko. Sep 8–22 - Live UX Training UX
with Vitaly Friedman. Sep 11 – Oct 12 - Accessibility For Designers UX
with Stéphanie Walter. Sep 21–29 - Jump to all workshops →
And now let’s dive into the wonderful world of CSS tools and techniques, everyone! We hope you’ll find them useful!
— Vitaly
1. Conditional Validation with nth
Doing a cursory check on user input controls is a great way to cut down on submission mistakes and help users make sure they have met certain requirements before they submit a form — for example, that they have filled out a required number of form fields. Preethi Sam explains how n of selectors can help with conditional validation.
2. New Responsive Image CSS
Describing sizes for responsive images has always been frustrating, but good news: those days are finally over. With the help of loading=“lazy” and the new sizes=“auto”, the browser can determine the best size for an image on its own. There’s one exception, though: hero images. Since they shouldn’t be lazy-loaded, they still require a real size value.
3. Mobile-Safe Layouts
Camera punch holes, notches, dynamic islands, home indicator bars — how can we make sure that important content and controls aren’t obscured by the system UI? Safe area insets adapt the layout to the current device’s safe area to prevent bugs. They are a baseline widely available and can be used in production today.
4. Unicode Variation Selectors
Have you heard of font-variant-emoji yet? The CSS property specifies whether an emoji is displayed in the full-color variant or as monochromatic text. To help ensure you always get the desired result, Matthias Zöchling tested the impact different values of font-variant-emoji have on how an emoji is displayed.
5. Container Query Typography Systems
When using breakpoint-based typography scales, you might run into issues where the scale doesn’t behave as expected. For example, when you have a two-column layout with an image on one side and content on the other. Container-based queries solve that. They allow your typography to respond to the size of the parent container rather than the entire viewport.
6. CSS Multi-Column
Multi-column layouts come with a downside: Once content exceeds a limit, it forces a horizontal scroll. To prevent this from happening, Chrome 145 introduced the column-height and column-wrap properties. They wrap the additional content into a new row below, creating a vertical scroll instead of a horizontal scroll. Abhishek Pratap Singh explores how the new properties compare to CSS Grid, Flexbox, and the evolving CSS Masonry.
7. CSS Subgrid
If you’ve ever wrestled with CMS-driven layouts, you’ll love CSS subgrid. Subgrid allows child elements to inherit the parent grid. This enables you to create complex block patterns and then use subgrid to align their contents back inside. No repetitive nested wrappers, no negative margin hacks. David Bushell’s guide helps you get started.
8. Accessible UX Research, Now Shipping 📚
We’ve got exciting news! Our newest Smashing book, Accessible UX Research by Michele A. Williams, is finally shipping worldwide! Get the book right away or order the eBook for instant download.
Accessible UX Research is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Download a free sample (PDF, 2.3MB) or get the book right away.
9. Upcoming Workshops and Conferences
That’s right! We run online workshops on frontend 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.
As always, here’s a quick overview:
- Design Patterns For AI Interfaces UX
with Vitaly Friedman. Jun 16–30 - The Modern UX Practitioner UX
with Paul Boag. June 24 – July 2 - Design Patterns For Complex UIs and Enterprise UX UX
with Vitaly Friedman. Sep 2–3 - Naming Design Systems DS
with Samantha Gordashko. Sep 8–22 - Live UX Training UX
with Vitaly Friedman. Sep 11 – Oct 12 - Accessibility For Designers UX
with Stéphanie Walter. Sep 21–29 - Jump to all workshops →
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 Geoff Graham (gg), 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.