Bună Smashing Friends,
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!
Ready to boost your skills this autumn? Save 20% on online workshops before prices go up on Oct 20.
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.
— 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.
From our sponsor
Bring Wild Ideas. Spread Them At MozFest, Oct 28–30 In Barcelona.
Last year, more than 2,000 people came together to unlearn old ways of building tech. This year, with eight tracks and a spot in Barcelona’s Open Tech Week, MozFest gives your ideas room to run wild. Join us for three days of conversation and hands-on building. Get your badge →
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.
Upcoming Online Workshops
Meet friendly online workshops all around UX and front-end, with new workshops we’ve just launched. And: there has never been a better time to get your tickets at the best price.
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 their 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.
Meet our brand-new book: “Accessible UX Research” by Michele A. Williams. Printed copies shipping now.
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.
10. Person Of The Week: Milan Milanović
Please give a warm round of applause for our Person of the Week: Milan Milanović. Milan is a software engineer and CTO with over 20 years of experience building software and leading teams across finance, banking, energy, and other industries. He is the author of the book Laws of Software Engineering and creator of Tech World With Milan.
With a PhD in computer science and AI, Milan thrives on bridging the gap between technology and innovation. He coaches engineers and people in leadership positions, offers consulting for companies, and also shares his knowledge of software architecture, engineering leadership, and AI as a speaker and guest lecturer.
Thank you for everything you do for the community, dear Milan! 🧡
11. Recent Smashing Articles
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 Cosima Mielke, Vitaly Friedman, and Iris Lješnjanin.
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Mastadon • Join us on Bluesky
