Smashing Newsletter: Issue #549

Editorial

Ahh, the shiny new world of CSS! In today’s newsletter, we look at the fine, delicate new features and techniques for CSS — from CSS scroll state and typographic scale to customizing bullet points and linear timing function. Plus a dash of accessibility and fast-loading CSS.

We are also getting closer and closer to our very first SmashingConf Amsterdam 2026 🇳🇱, taking place in the magical Pathé Tuschinski on April 13–16. With a fantastic community and practical deep-dives all around CSS, accessibility, design, and UX — plus friendly workshops on CSS, AI, design, and complex UIs.

Later this month, we are also starting a few new online workshops that might be relevant for you as well:

Figma Workflow Masterclass Figma
with Christine Vallaure. Mar 18–24
UX Design Leadership Masterclass UX
with Paul Boag. Mar 18–26
Designing Better Products Masterclass UX
with Stéphanie Walter. Mar 23 – Apr 6
How To Measure UX & Impact + video course UX
with Vitaly Friedman. Mar 31 – Apr 10
Resilient and Maintainable CSS CSS
with Miriam Suzanne. Jun 2–10
Jump to all upcoming workshops →

Happy learning and wishing you a fantastic rest of the week!

— Vitaly

1. CSS Scroll State

Whether you want to fade headers, slide elements, or trigger transitions as users scroll, scroll-state queries make it possible to style elements based on how a container is scrolled. CSS observes the container, and when it is scrolled or a certain position is reached, the styles update automatically. Be cautious, though. The feature is still experimental.

2. Typographic Scale CSS

Do you know the high-precision technical pens that draw very fine and precise lines? They inspired Rob Weychert to create a typographic scale with a limited set of stroke widths. What might sound rather simple becomes a bit more complicated when you consider contrast and size. Rob takes you step by step through the process of creating the scale system and how he uses CSS to do the math.

3. Accessible Faux-Nested Controls

Let’s say you want to build a list of items, with each item containing both a primary action and one or more secondary actions. Nesting one interactive control inside another is an accessibility no-go, but Eric Bailey’s faux-nested interactive controls provide an accessible solution to the problem. It creates the appearance of nested controls without having to do so in the DOM.

Accessible Faux-Nested Interactive Controls

4. Customizing Bullet Points

Modern CSS brings new styling capabilities to ordered and unordered lists. If you’re looking for an overview of what’s possible, Richard Rutter takes you on a deep dive into the world of customized lists. Whether you want to change font and color, use emojis, or define your own numbering sequence, the guide has got you covered.

An In-Depth Guide To Customising Lists With CSS

5. Linear Timing Function

Bézier curves are super powerful, but there’s something they can’t do: spring and bounce effects. That’s where the linear() timing function comes in. It allows you to draw an easing curve to model your desired kind of motion, including realistic springs and bounces. Josh W. Comeau explains how linear() works and shares tools you can use to get started right away.

6. Perfect Pie Chart

Pulling in a whole JavaScript library just to display a couple of simple pie charts? If that feels overkill to you, you might want to give Juan Diego Rodríguez’s approach a try. He challenged himself to design a perfect pie chart with CSS — one that is screen-reader-accessible, HTML-customizable, and only employs a minimum of JavaScript.

Trying To Make The Perfect Pie Chart In CSS

7. How To Load CSS Fast

Embedding critical inline styles for every page (or creating an external style sheet for every page) or loading the full CSS up front are the two options we usually turn to to load CSS. However, neither of them is optimal for performance. Compression dictionaries are here to change that. Already supported in Chromium browsers, they avoid the tradeoffs of traditional CSS loading techniques and reduce costs significantly.

8. Accessible UX Research, Now Shipping 📚

We’ve got exciting news! Our newest Smashing book, Accessible UX Research by Michele A. Williams, is finally 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.

9. 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.

Smashing Online Events — With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s a quick overview:

Figma Workflow Masterclass UX
with Christine Vallaure. Mar 18–24
UX Design Leadership Masterclass UX
with Paul Boag. Mar 18–26
Designing Better Products Masterclass UX
with Stéphanie Walter. Mar 23 – Apr 6
How To Measure UX & Impact + video course UX
with Vitaly Friedman. Mar 31 – Apr 10
Design Patterns For AI Interfaces UX
with Vitaly Friedman. Video course + live UX training.
Jump to all workshops →

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).

March 10, 2026 Smashing Newsletter: Issue #549

Previous Issues