October 28, 2025 Smashing Newsletter: Issue #531
This newsletter issue was sent out to 183,329 subscribers on Tuesday, October 28, 2025.
Editorial
CSS doesn't stand still. Over the years, we've fixed so many issues that we've been struggling for years — from cascade layers to field sizing to text-wrap: balance. But CSS keeps evolving, and in this email, we'd love to highlight a few CSS techniques that might be useful for your front-end work.
Quick reminder: we’ve announced SmashingConf Amsterdam 2026 🌷 — our brand new conference for designers, UX and UI engineers — all around CSS, design patterns, accessibility, and design systems. Get your ticket.
As winter is coming up, we have a few friendly online workshops coming up as well:
- Design Patterns For AI + new video course 🍎 UX
with Vitaly Friedman. Oct 30 – Nov 13 - UX Strategy In Action UX
with Susan and Guthrie Weinschenk. Nov 6–20 - The New CSS Toolkit Dev
with Kevin Powell. Dec 3–17 - Jump to all workshops → 🎢
We also have a few free online events coming up:
- Why You Will Not Be Replaced by AI (Nov 19)
- Smashing Meets Accessibility (Dec 10)
And as always, I hope you’ll find a bit of time to slow down before the end of the year and crave a bit of time for yourself. Wishing you healthy, calm, and peaceful days, everyone! 🎉🥳
Happy designing, everyone!
— Vitaly
1. Compressed Fluid Typography
Fluid type calculations almost always start from the assumption that the base font size is 16px. But what if it isn’t? What happens to your type scale if a user adjusts their browser’s default font size to 24px, for example? Matthias Ott shares an approach that helps you prevent your font scale from scaling up uncontrollably in such cases, while still respecting your users’ preferences.
The approach introduces a damping factor into the calculation that compresses the fluid type scale; the larger the base font size gets, i.e., the overall growth rate of the typography slows down as the user’s base font size increases to ensure visual balance. If you decide to use the approach in practice, be careful, though: as Matthias points out, it doesn’t fully comply with WCAG requirements, and you’ll need a fallback for non-supporting browsers.
Speaking of fluid typography: Ash Bryant created a handy little tool to help you create a fluid type scale. With just a few clicks, you can configure, review, and export a type scale to use it in your project right away. (cm)
2. New CSS Features
CSS is evolving so fast that it’s impossible to stay on top of everything that’s new. Now, wouldn’t it be cool if you could take just 30 minutes of your time, lean back, and someone would explain all those shiny new CSS features to you? The talk that Adam Argyle gave at CascadiaJS in September did exactly that, and the recording is now available on YouTube.
Jam-packed with CSS wisdom, Adam’s talk takes you through 25 CSS features from the past five years in just 30 minutes. Covering everything from view transitions, range syntax, and cascade layers to custom scrollbar styling, dialogs, textbox trim, and much more, the talk provides good examples and practical use cases for each feature it tackles. A must-watch for anyone who wants to stay ahead of the CSS game. (cm)
3. CSS Anchor Positioning
Let’s say you have a simple card component that contains an image, title, description, and category tag. You want to position the category tag on top of the image, in the top right corner. Easy, right? But as soon as you change the card layout to horizontal on larger screens, the whole thing is likely to break, as the category tag moves to the right and away from the image. Luckily, anchor positioning is here to fix problems like this one, without relying on fragile hacks.
Based on the above example, Ahmad Shadeed wrote a comprehensive introduction to anchor positioning. Anchor positioning allows you to position an element relative to another anchor, regardless of whether it’s a parent or not. And there’s more to it, as Ahmad shows: With anchor positioning, you can also use the position-try-fallbacks property to make a target element switch its position if it doesn’t fit perfectly within the viewport. A powerful little CSS feature that makes positioning so much more straightforward. (cm)
4. CSS Round-Out Tabs
Have you used CSS shape() already? Chris Coyier came up with a use case that shows the function’s full potential: He created a set of “round-out” tabs, where the literal tab part of the UI connects to the content below with a rounded edge that flares out as it is connected.
Usually, creating an effect like this required hacks with additional elements, but shape() finally gives us a primitive that can draw anything you could draw with a pen tool. Chris wrote a blog post in which he walks you step-by-step through the process of carving the tab shape out of a rectangle, with the help of shape() and clip-path. What makes the approach extra cool is that the tab shape is not completely fixed (parts of it can be fixed coordinates, while other parts are flexible), and you can variablize it to adjust the look on the fly. (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:
- Design Patterns For AI Interfaces + new video course 🍎 UX
with Vitaly Friedman. Oct 30 – Nov 13 - UX Strategy In Action UX
with Susan and Guthrie Weinschenk. Nov 6–20 - Why You Will Not Be Replaced by AI Free
with Vitaly Friedman. Nov 19 - Theming Design Systems Design
with Samantha Gordashko. Dec 1–15 - How To Measure UX And Design Impact UX
with Vitaly Friedman. Dec 1–12 - The New CSS Toolkit Dev
with Kevin Powell. Dec 3–17 - Figma Workflow Masterclass Design
with Christina Vallaure. Dec 10–16 - Jump to all workshops →
6. How Much Do You Know About Media Queries?
When you think of media queries, what comes to your mind? Probably the classics like @media (min-width: 400px) or @media (prefers-reduced-motion: reduce), right? But media queries have a lot more to offer, as Daniel Schwarz shows.
In his post “How much do you really know about media queries,” Daniel explores eight of the lesser-known descriptors, among them any-hover and any-pointer, forced-colors, orientation, and resolution. Once you understand how to use them, they are a great way to cater to more user preferences and to get ahead of the curve of any new and amended accessibility laws. (cm)
7. New CSS Reset
Modern browsers have become a lot more consistent in their default styling, yet a CSS reset can still be a good choice if you want a better baseline for your style sheets. If you’re looking for a light but powerful CSS reset that achieves exactly that, UA+ is for you.
Created by Manuel Matuzović, UA+ goes a different route than other reset style sheets. Instead of mostly resetting and normalizing properties, it focuses on improving existing user agent styles and adding new styles only where browsers fall short. It also puts a special focus on accessibility. If you’re curious to see what the UA+ styles look like compared to your browser’s default styles, be sure to check out the demo pages. The tweaks might be barely noticeable, but, as Manuel points out, they help browsers where needed. (cm)
8. CSS To Speech
Providing alternative text to meaningful images is a WCAG requirement, and images and characters inserted in CSS should be treated the same way you treat HTML images. So, how to provide alt text to CSS-generated content to make sure it is announced as expected?
Historically, we had to resort to workarounds using placeholder spans in the markup for this purpose, but now we finally have a better way: We can provide alt text for CSS-generated content directly in CSS, after a slash following the content. Sara Soueidan wrote a comprehensive guide on how it works and what to watch out for. (cm)
9. Split Flap CSS
Do you remember the split-flap boards at train stations? The ones that cycle through different faces, until the desired characters are displayed to spell out destinations, train numbers, and arrival times? If you’re up for some sweet nostalgia, Tim Farnam recreated the split flap effect with CSS, and not only that, he also built a playground where you can create your own split flap animation and copy the code with just a click.
In the accompanying blog post, Tim dives deeper into the CSS that fuels the effect and how each element can be used to adjust it. He also shows examples of styled split flaps that elaborate the idea further to create different effects, among them a glass and a Rubik’s Cube effect. A great example of what can be achieved with CSS if you think outside the box. (cm)
10. 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 edition shipping Fall 2025. eBook also available for download in Fall 2025. 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.