August 12, 2025 Smashing Newsletter: Issue #520
This newsletter issue was sent out to 188,007 subscribers on Tuesday, August 12, 2025.
Editorial
Have you heard of if() landing in CSS? What about the new corner-shape property? Or scroll state queries? Well, as CSS continues to evolve, we see new techniques and features emerging. In this newsletter, we take a closer look at some of them — and a pinch of SVG as well.
If you’d like to deep dive into modern CSS, Stephanie has a wonderful front-end workshop on building interactive, accessible components with modern CSS & JS coming up later this month — with tons of practical techniques and strategies for more reliable UI components. Jump to details.
(Psssst, we also have a UX Strategy Masterclass coming up in late August, with pragmatic and practical tactics and strategies to thrive and survive in complex environments!)
Also, our Autumn adventures are about to begin! We are so happy to come back to magical Antwerp for in-person workshops on Measuring UX and Advanced Design Systems with Mr. Brad Frost and yours truly, Vitaly. Very practical and very actionable sessions, with a friendly bundle available as well.
We absolutely can’t wait to see you — in Antwerp, in Freiburg, or in New York later this year! Wishing you a fantastic rest of the week, everyone!
— Vitaly
1. Scroll-Spy Effect
The new scroll-target-group landing in Chrome 140 is a powerful little helper. By combining it with the :target-current pseudo-class, we can create scroll-spy effects with just two lines of CSS. Una Kravets explains in detail how it works.
Una’s technique uses anchor links with a few additional styling affordances to display a trackable table of contents with smooth scrolling and fade-in-fade-out effects as users switch sections. A nice progressive enhancement, and for non-supporting browsers, you can simply hide the table of contents. (cm)
2. What You Need To Know About SVG
SVGs offer so many possibilities that it can be overwhelming — particularly if you’re still at the very beginning of your SVG journey. So, where to begin to not get lost in the rabbit hole? Josh W. Comeau wrote a friendly introduction to SVG that provides a solid foundation for your SVG adventures.
Josh’s guide covers everything you need to know to get started with SVG and, of course, some cool tricks you can use right away. You’ll learn the basic SVG shapes, get familiar with scalable SVGs and the viewbox attribute, and dive deeper into presentational attributes and animated strokes. A must-read for anyone who wants to get to grips with SVG. (cm)
3. CSS scroll-state()
Let’s say you want your navigation bar to have a box-shadow when stuck, so that it appears to float over the content it overlays. Or you have an image gallery that is scrollable horizontally, and you want to display a caption for the snapped item. Things like these can now be achieved with CSS only, no JavaScript required.
Building upon container queries, Chrome 133 introduced scroll-state container queries. This means that the browser-managed state for sticky positioning, scroll snap points, and scrollable elements can now be queried and adapted from CSS. If you want to dive deeper into how CSS scroll-state() works, Adam Argyle wrote a useful guide in which he explains the foundations and practical use cases. (cm)
4. Fitting Text To A Container
As the Baymard Institute found out, the optimal line length for body text is 50–75 characters. Luckily, character units like clamp() and min() have made setting the optimal line length much easier than it was a few years ago. If you’re looking for a comprehensive guide on how to do it, Daniel Schwarz has got you covered.
In his guide, Daniel not only explains how to set the optimal line length, but he also looks into two approaches to fitting text to the width of a container. The first approach uses SVG and a few lines of JavaScript; the second approach, which is a bit more complicated, relies on pure CSS. (cm)
5. 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:
- Building Interactive, Accessible Components with Modern CSS & JS Dev
with Stephanie Eckles. Aug 18–27 - UX Strategy Masterclass UX
with Vitaly Friedman. Aug 20–29 - Accessible Typography for Web & UI Design Masterclass Design
with Oliver Schöndorfer. Sep 11–19 - Behavioral Design Workshop UX
with Susan and Guthrie Weinschenk. Sep 18 – Oct 3 - Dataviz Accessibility Workshop Dev
with Sarah L. Fossheim. Sep 22 – Oct 6 - Jump to all workshops →
6. CSS Conditionals With if()
Available in Chrome versions 137 and newer, the if() function enables a cleaner developer interface for dynamic styles like style queries and media queries. Una Kravets shares some practical examples of how we can make use of it.
As Una shows, you could use if() to include inline media queries in your styles, for example, to check for a user’s theming preference or do inline media queries for the viewport width. Another way to use the new function is to create inline support queries — to check for wide-gamut color support, for example. State-based styling is also possible with if(). Exciting new opportunities for CSS developers! (cm)
7. CSS corner-shape
Have you heard of the CSS corner-shape property already? If not, be sure to check out Amit Sheen’s guide. As of now, corner-shape is only supported by Chrome 139 and above, but the creative possibilities that this seemingly small addition offers are super exciting.
As Amit explains, you can think of corner-shape as a companion to border-radius: border-radius determines the size of the curve and corner-shape defines how that curve looks. And this unlocks a whole new world of possibilities that previously required complex SVG implementations or image-based solutions — from simple geometric shapes like rhombuses, octagons, and hexagons to the mighty superellipse function. (cm)
8. Meet Accessible UX Research, A Brand-New Smashing Book 📚
In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. For our newest book, we have teamed up with Dr. Michele A. Williams: Meet “Accessible UX Research.”
“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. Print shipping in August, eBook available for download later this summer. Pre-order the book, and save off the full price.
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.