Smashing Newsletter: Issue #492

Editorial

We are living in the golden age of CSS. It seems like almost everything that was annoying front-end developers in the past is now working out of the box — seamlessly, across all browsers, and with very little tweaking necessary.

Want to minimize layout shifts for web fonts and font fallbacks? Use font descriptors. Want to select previous siblings? Use funky selectors with :has. Want to style components depending on their parent’s styles? Style queries are here to help.

In this newsletter, we look at some of the wonderful new CSS features that you can start using immediately. We’re covering more in our online workshop on New Front-End Adventures (2025 Edition) this week.

And as always, we also have some wonderful and friendly online and in-person events coming up this year:

Accessible Typography with Oliver Schöndorfer,
UX Design Leadership Masterclass with Paul Boag,
Fixing Frustrating Design Patterns For 2025 by yours truly,
SmashingConf Freiburg 2025 (Sept 8–11),
SmashingConf NYC 2025 (Oct 6–9).

For now, though, happy CSS times, everyone!

— Vitaly

1. Text Box Trim

Back in the days when typesetting was done by hand, pieces of metal were used to separate lines of text. Inspired by traditional leading, the web divides the piece of lead in half and distributes one piece above and one piece below the content. CSS text-box-trim now enables us to take this additional space back to achieve better optical balance.

Adam Argyle summarized how we can use text-box to control the space above and below text, whether it’s in a heading, a button, or a paragraph. This seemingly small typographic detail can make a big difference: the trim capability makes centering and aligning much simpler — without any padding hacks — and we can even get closer to proper leading. (cm)

2. CSS Easing Functions Playground

CSS easing functions can be difficult to make sense of. But with the right tool up your sleeve, they don’t have to be. Easing Wizard is a handy little helper for visualizing and testing how CSS easing functions behave.

Created by Matthias Martin, Easing Wizard supports Bézier, spring, bounce, wiggle, and overshoot and offers plenty of presets, customization options, and preview modes to see the easing function in action. What makes Easing Wizard stand out is that it uses linear timing function instead of keyframes. A fantastic playground to tinker with easing functions, and once you’re happy with the result, you can copy the CSS or Tailwind CSS code to your clipboard with just one click. (cm)

3. CSS light-dark()

The color-scheme CSS property has been widely supported for many years now, helping browsers determine which pre-defined color scheme to use for things like the page’s background, text color, scrollbars, form controls, and system colors. However, authors cannot use color-scheme in their own code to adjust custom styles. The new light-dark() function is here to change that.

Mayank wrote a comprehensive guide to light-dark() in which they dissect how the new function works and how we can use it to set up themed custom properties that respect the user’s preference by default but also let them override the default color scheme. A great way to keep all your custom properties neatly defined in one single place without code duplication. (cm)

4. calc-size() And interpolate-size

One of the things that have long been on the wishlist of front-end developers was animating to or from height: auto. Two new CSS features have now made the wish come true — and they have also added some cool new possibilities on top of that. Say hello to the interpolate-size property and the calc-size() value function.

The interpolate-size property enables animating to intrinsic sizes (e.g., height: auto), and since the value is inherited, we can enable it site-wide with a single declaration. Perfect for navigations and menus. For those occasions when you need something slightly smaller or bigger than one of the intrinsic sizes, calc-size allows for calculations based on keyword values. Kevin Powell wrote a practical deep dive into calc-size() and interpolate-size in which he explains the new features in detail. (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.

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:

Accessible Typography for Web & UI Design Masterclass design
with Oliver Schöndorfer. Feb 10–18
UX Design Leadership Masterclass UX
with Paul Boag. Feb 11–20
Advanced Design Systems Workflow
with Brad Frost. Feb 18–26
Design Token & UI Component Architecture Workflow
with Nathan Curtis. Feb 20–28
Deep Dive on Accessibility Testing Dev
with Manuel Matuzović. Feb 26 – March 13
Building Modern HTML Emails dev
with Rémi Parmentier. Mar 3–11
The Secrets of Web Performance dev
with Ryan Townsend. May 7–21
Smart Interface Design Patterns UX
with Vitaly Friedman. Video course + live UX training
Jump to all workshops →

6. Creative Borders

Creating a border from an image usually involves using border-image to slice up the image into several pieces and reassemble them to construct the corners and sides of a box. background-clip: border-area offers a much more elegant solution where a background image or gradient can fill the whole border in one piece.

In her guide to background-clip: border-area, Jen Simmons explores the creative possibilities that the new approach has to offer. You can use it to create buttons where the button border and text are filled with the same gradient, fancy borders around illustrations, photos with photographic borders, or even progress rings. Currently only available in Safari versions 18.2+, background-clip: border-area makes for a nice progressive enhancement. Fingers crossed that other browsers will follow soon. (cm)

7. Overflow Clip

Whether we want to enable vertical scrolling or clip the content of a wrapper, overflow is a common property to use. However, it comes with a downside: When overflow is set to hidden on one axis, the other axis will become auto by default. The result is clipping on both sides, which isn’t always desired. So what can we do when we want clipping on only one axis? That’s where overflow: clip comes in.

Ahmad Shadeed wrote an interactive guide to overflow: clip and how it can help us solve tricky interface challenges. From hero sections and page headers to scroll-driven animations and clipping an element larger than its parent, there are several use cases where the clip value can shine, as Ahmad shows. And although it’s still relatively new, it is already well-supported across all major browsers. A mighty little helper. (cm)

8. Recently Published Books 📚

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.

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. Have you checked them out already?

Success at Scale by Addy Osmani
Understanding Privacy by Heather Burns
Touch Design for Mobile Interfaces by Steven Hoober
Check out all books →

Meet our newest book: Success At Scale by Addy Osmani. Get the book or browse the complete library.

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

January 28, 2025 Smashing Newsletter: Issue #492

Previous Issues