October 13, 2026 Smashing Newsletter: Issue #580
This newsletter issue was sent out to 172,967 subscribers on Tuesday, October 13, 2026.
Editorial
CSS doesn’t stand still. There are new CSS techniques and experiments, but also new cross-browser features and tools. In this newsletter, we explore what’s new in CSS and what CSS features we can use today that we perhaps didn’t know of yesterday. Let’s dive in!
By the way, if you want to prepare for what’s next in the world of front-end and UX, we’ve just launched our new online workshops. And there has never been a better time to get your tickets at the best price.
- Save 10–20% off today: prices will go up on Oct 20. Also, jump to bundles for teams.
- How To Measure UX and Design Impact UX + self-paced course
with Vitaly Friedman. Oct 20 – Nov 3 - Building Modern HTML Emails Dev
with Rémi Parmentier. Oct 26–29 - Deep Dive On Accessibility Testing Dev
with Manuel Matuzović. Nov 9–23 - Design Patterns For AI Interfaces UX + self-paced course
with Vitaly Friedman. Nov 16–24 - AI-Ready Design Systems For Designers DS
with Christine Vallaure. Nov 30 – Dec 4 - Jump to all workshops →
— Vitaly
1. CSS Linked Parameters
When you place an SVG as a content or background image on a page, you reach a styling dead end: you can put the SVG there, but you can’t paint it. CSS Linked Parameters are here to change that. They are currently only supported in Firefox Nightly and Safari Technology Preview, but definitely worth keeping an eye on, as Vadim Makeev shows. He used the new spec to print nine variations of Andy Warhol’s iconic Marilyn Monroe with it, from just one SVG.
2. Responsive iframes
Third-party interactive widgets, comments, and media frames usually put us in a layout dilemma: either hardcode a height and risk ugly scrollbars, or implement complex event loops. Those days are finally over, at least in Chrome. Chrome 156 recently added support for responsive iframes, enabling embedded documents to automatically resize their container frame to fit internal content.
3. Better Icon And Label Alignment
Let’s say you have a list of items, each with an icon. When the text is one line, the icon is centered; when the text spans over multiple lines, the icon is still centered, which can look quite odd. So, how can we make icon and label alignment better when text is wrapped? Ahmad Shadeed shares his solution for keeping the icon aligned vertically.
4. Sidenotes With CSS
Sidenotes are a great way to display additional content next to text instead of sending the reader to the bottom of the page with a footnote. Vincent Bernat shares his approach to sidenotes with CSS anchor positioning. They don’t require any JavaScript and fall back below the paragraph referencing them on narrow viewports and in browsers that don’t support anchor positioning.
5. Better Dashboard Figures
Table columns that don’t line up or figures that jump when they update — numbers in dashboards often look slightly off. Carmen Ansio shares practical tips to help you fix your numbers with just a few lines of CSS. They switch on tabular numbers, small caps for labels, old-style figures for text, and real fractions — small details that enhance the look of your dashboard and help your users make sense of the content.
6. Filling In The Last Row
While we’re waiting for gap decorations to be widely supported, we can use workarounds to add borders between grid cells in CSS. However, in responsive layouts, where the number of columns in the grid isn’t fixed, things get tricky. Tim Wilson shows how to keep it simple by using separate filler cells for each breakpoint.
7. Brighter Than White
Logos or text that glow brighter than white? Gain maps make it possible, at least on HDR displays in combination with Chrome or Safari 26. If you want to make your logo glow, Chris Bennett created a little tool to help achieve the desired effect. He also shares tips on how to paint real text through an HDR image to also make your text brighter than white.
8. CSS Features We Can Use Today
Sass, JavaScript hacks, and PostCSS plugins used to fill the gaps for the things that CSS wasn’t capable of. Luckily, we’ve finally reached a state where the browser can do a lot of them on its own. Flavio Copes explores twelve modern CSS features, along with the workarounds they retire, code snippets you can paste into your project, and info on where support stands.
9. Accessible UX Research, Shipping Worldwide 📚
Just in case you haven’t noticed yet: our newest Smashing book, Accessible UX Research by Michele A. Williams, is 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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.