December 16, 2025 Smashing Newsletter: Issue #538
This newsletter issue was sent out to 180,756 subscribers on Tuesday, December 16, 2025.
Editorial
It might appear that the speed of shipping new CSS features to the web has slowed down, but the opposite seems to be true. From invoker commands and anchored container queries to scroll-state queries and tree-counting functions: CSS keeps evolving, and with it useful CSS techniques and libraries — and this newsletter highlights just that.
Today’s newsletter issue is kindly powered by our dear friends at Siteimprove, who help folks create high-performing, accessible content that’s easy to discover by both humans and AI. Thank you to the entire Siteimprove team for their hard work and kind support! 🧡
With the holidays coming up and things (sort of) slowing down this time of the year (don’t forget to breathe!), here's a quick overview of front-end & UX online workshops 2026 to help you plan next year:
- Behavioral Design Workshop UX
with Susan and Guthrie Weinschenk. Jan 15– 29 - Deep Dive On Accessibility Testing Dev
with Manuel Matuzović. Jan 19 – Feb 2 - Building With AI For Everyone Free
with Christine Vallaure. Jan 20 - Design Patterns For AI Interfaces UX
with Vitaly Friedman. Jan 22 – Feb 26 - Designing For Complex UI Masterclass UX
with Vitaly Friedman. Mar 3–17 - Jump to all workshops →
As we are nearing the end of the year, I sincerely hope that you will have a chance to spend some peaceful and delightful time with your loved ones, old and new friends, and perhaps even total strangers.
Sending a lot of positive energy, enthusiasm, and love your way, everyone — to you and to wonderful people around you.
— Vitaly
1. Popover Hint
Let’s say you have an open popover — a menu or dialog, for example — and want to display another, unrelated popover, such as a tooltip or a link preview. popover=“hint” makes it possible, while keeping the primary popover open. Una Kravets explains how it works and how interest invokers (still experimental) enhance the approach further by removing the need for JavaScript.
2. Animations To Graphs
Stanko Tadić built a handy little tool for debugging animations and all other occasions when you want to break down a complex animation to examine it more closely: Monorail. It turns any CSS keyframe animation into an interactive graph and lets you drag or play through the timeline to see how the animated values change frame by frame.
3. Styling Alt Text
It’s frustrating when an image isn’t loading, but we can make the experience at least a little better by styling our alt texts. As Andy Bell shows, it’s just as simple as styling any other text. A nice detail to elevate your user interface and show you care, even when things don’t go as expected.
4. SVG To CSS Shape Converter
When it comes to CSS shapes, there’s probably no one who has such a large collection as Temani Afif. But not only that, he also creates useful tools that let everyone easily generate their own. To take advantage of the new shape() function, he has now created an SVG to CSS Shape Converter that converts path() shapes into shape() commands. It works with images and supports gradient coloration.
5. Adjusting Perceived Font Weight
Have you ever noticed that white text on a black background looks thicker than black text on a white background, although the weights are the same? Adam Argyle shows how you can adjust the perceived font weight for dark mode without layout shift, using variable fonts and the GRAD axis.
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:
- Behavioral Design Workshop UX
with Susan and Guthrie Weinschenk. Jan 15– 29 - Deep Dive On Accessibility Testing Dev
with Manuel Matuzović. Jan 19 – Feb 2 - Design Patterns For AI Products + video course UX
with Vitaly Friedman. Jan 22 – Feb 26 - Designing For Complex UIs + video course UX
with Vitaly Friedman. Mar 3–17 - Jump to all workshops →
6. Responsive Letter Spacing
Take the following scenario: You want to apply reduced letter spacing to your typography, but in a way that transitions gradually. As font-size increases, you want the letter-spacing to decrease, tightening headings and large text while keeping smaller text readable. As Tyler Sticka shows, modern CSS is up to the challenge, and it takes only one CSS rule.
7. OKLCH Color Tools
The OKLCH color model makes working with colors much easier as the colors are more accurate in terms of how humans perceive them. To help you harness the power of OKLCH, Jakub Krehel created oklch.fyi, a suite of OKLCH tools. They let you explore the color space, create color palettes, compare OKLCH and sRGB gradients, and convert colors to OKLCH.
Accessible UX Research, eBook Now Available For Download 📚
We’ve got exciting news! eBook versions of Accessible UX Research, a new Smashing Book by Michele A. Williams, are now available for download! Which means soon the book will go to the printer. Order the eBook for instant download now or reserve your print copy at the presale price.
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 eBook 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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.