Smashing Newsletter: Issue #553

Editorial

Have you used light-dark() in CSS already? What about CSS compression dictionaries, focus group, masonry layout, and scroll state queries? Well, in this newsletter we’ll explore all of them, with new CSS features and techniques — and with useful pointers to keep in mind when writing CSS.

CSS will also be an important part of SmashingConf Amsterdam 2026 🇳🇱 — our very first conference in lovely Amsterdam on April 13–16. On design systems, UX, frontend and complex UIs — and practical workshops as well:

Figma Deep Dive 💎 by Christine Vallaure
Accessible Frontend Patterns 👓 by Manuel Matuzović
Context-Based Design Systems 🧱 by TJ Pitre
Designing For Complex UIs, 2026 🕹️ by Vitaly Friedman
Jump to all workshops ↗

We are looking forward to seeing you in-person again, everyone — and thank you so much for reading throughout all these years! 🎉🥳

— Vitaly

1. CSS `contrast-color`

With CSS contrast-color newly available in all modern browsers, dynamic color systems and theming have reached the next level. The new function enables CSS to detect contrast colors and choose white or black as the contrasted value for text on a background. Una Kravets summarized what you need to know about the API and how you can take it even further and go beyond black and white.

2. CSS Compression Dictionaries

A fast first page or fast navigation, what’s your priority? With compression dictionaries, loading CSS is not an either/or question anymore. They enable the browser to load only the CSS needed for the current page, and, while the user reads, it downloads a dictionary file that contains all the styles used across the site. Lionel Péramo explains in detail how it works and what you need to watch out for when using the technique.

3. Clip-Path Animations

Let’s say you have a round trigger button and want to display a WorkCard detail panel when it is clicked. Instead of fading it in from the center, Karl Koch came up with a different approach: it opens the detail layer with a circular clip-path from the same point as the trigger, making the interaction feel like one component with a physical center. Nice!

4. Details That Make UIs Better

There isn’t that one single thing that makes a great interface. It’s rather a combination of small details that add up to a great experience. Jakub Krehel shares the small details he uses to enhance his interfaces — and not only that, but he has also turned his tips into an open-source agent skill to teach them to AI coding assistants.

Details That Make Interfaces Feel Better

5. Deep-Dive Into `visually-hidden`

Is there still any point to most styles in visually-hidden classes in 2026? David Bushell set out on a mission to find an answer to the question, and, well, as it turns out, the rabbit hole is deep, and the answer is not obvious. David summarized his findings and thoughts in a comprehensive post that dives deep into the history of visually-hidden, why something as hacky was normalized, and why there’s no native solution yet.

Everything You Ever Wanted To Know About visually-hidden

6. The Great CSS Expansion

From anchor positioning and select customization to scroll-driven animations and view transitions, a new wave of long-requested CSS features is finally landing in browsers. In his post “The Great CSS Expansion,” Pavel Laptev gives an overview of what is shipping, what it replaces, how much JavaScript you can delete, and what the platform still has not figured out.

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.

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.

As always, here’s a quick overview:

Naming Design Systems Design Systems
with Samantha Gordashko. Apr 20 – May 4
UX Leadership and Influence UX
with Joe Natoli. Apr 23 – May 7
Resilient & Maintainable CSS Dev
with Miriam Suzanne. June 2–10
Design Patterns For AI 2026 + video course UX
with Vitaly Friedman. Jun 16–30
Live UX Training 2026 + video course UX
with Vitaly Friedman. Jun 16–30
Jump to all workshops →

7. Light-Dark Mode For Images

The light-dark() function has been a game-changer for colors, enabling developers to adapt colors to a user’s preferences, without the need for repeating media query blocks. Now, light-dark() is being extended to images, which means you can use it to set a background image, mask, or logo based on a user’s color scheme. Bramus Van Damme explains how it works and how to provide a fallback for non-supporting browsers.

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.

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

April 7, 2026 Smashing Newsletter: Issue #553

Previous Issues