Smashing Magazine CSS newsletter

New CSS features, tabular numbers, filling in the last row, icon and label alignment, responsive iframes. Issue #580 • Oct 13, 2026 • View in the browser 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. 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. 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. Save 10–20% o