April 8, 2025 Smashing Newsletter: Issue #502
This newsletter issue was sent out to 191,201 subscribers on Tuesday, April 8, 2025.
Editorial
As frontend keeps evolving, many of the headaches and challenges we’ve experienced in the past are slowly but steadily fading away. If you dreamed about customizing <select> menus without JavaScript, you can do that today. If you want to find a way to break down heavy JavaScript execution, you can do that with Scheduler API.
In this newsletter, we dive into some of the fine details around CSS, JavaScript, and web performance — from invoker commands and flexible text underlines to fully customizable menus.
By the way, we have a wonderful online workshop on The Secrets of Web Performance with Ryan Townsend coming in May. Of course, we also have a few other wonderful workshops and conferences coming up:
- Theming Design Systems by Sam Gordashko,
- Free Workshop: Cognitive Biases 101, with Steph Walter,
- Designing Websites That Convert with Paul Boag,
- How To Measure UX and Design Impact with yours truly Vitaly Friedman.
We hope you’ll find them useful — and of course, we are looking forward to seeing you online and offline, everyone!
— Vitaly
1. Command And Commandfor
Whether it’s opening menus, toggling actions, or submitting forms, buttons provide the foundation of interactivity on the web. However, making them simple and accessible can be more challenging than it should be. The new command and commandfor attributes are about to change that.
Introduced in Chrome 135, command and commandfor enhance and replace popovertargetaction and popovertarget. They let the browser trigger built-in behaviors without JavaScript and address core issues around simplicity and accessibility, such as providing the aria-details and aria-expanded equivalent relations.
If you want to dive deeper into what the new attributes are capable of, check out Keith Cirkel’s introduction to command and commandfor and the talk he gave at the London Web Standards meetup in February. Exciting times for the web platform! (cm)
2. Chilled-Out Text Underlines
What does the perfect link in body text look like? One thing is certain: It needs to be easily recognizable as a link, without distracting from reading the paragraph. Chris Coyier tinkered with the classic blue link to come up with a solution that keeps the spirit of the default styling while making it just a bit less intense.
For a more chilled-out appearance, Chris adds opacity to the underline when the link is not hovered or focused. The underline itself uses currentColor, which means the chilled-out style will be applied automatically, whatever color the link might have, making the approach a good candidate for a default stylesheet. Clever! (cm)
3. Custom <select>
Traditionally, it has been difficult to customize the styling of <select> elements. But these times might be over soon. From Chrome 135, designers and developers finally get full control over styling the <select> element, along with the select button, drop-down picker, arrow icon, current selection checkmark, and each individual <option> element.
The new functionality not only allows you to style <select> with CSS, but you can also include rich HTML content like images or SVGs in it. The enhanced <select> is a progressive enhancement, so browsers that don’t support it yet will fall back to classic selects. Adam Argyle summarized everything you need to know about customizable <select> and the creative possibilities it offers. (cm)
4. 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.
As always, here’s a quick overview:
- Cognitive Biases 101: How They Impact Users, Research, and Teams free
with Stéphanie Walter. Apr 10 - The Secrets of Web Performance dev
with Ryan Townsend. May 7–21 - How To Measure UX and Design Impact UX
with Vitaly Friedman. May 12–20 - Enterprise UX Masterclass UX
with Marko Dugonjić. May 14–21 - Design Patterns For AI Interfaces UX
with Vitaly Friedman. Jun 4–18 - Accessibility for Designers UX
with Stéphanie Walter. Jun 16–24 - Smart Interface Design Patterns 🍣 UX
with Vitaly Friedman. Video course + UX certification. - Jump to all workshops →
5. Optimizing For High-Latency Environments
Latency is one of the key limiting factors on the web. To help us get insights into the network topography of our users and assess how we might be impacted by high-latency regions, Chrome has recently begun adding a measure for latency to the Chrome User Experience Report: Round-Trip-Time (RTT).
So what can you do if it turns out that latency is a severe liability for your site? Harry Roberts wrote a comprehensive guide that helps you optimize for high-latency environments. It includes best practice advice for designing with latency in mind, what you can do if you can’t upgrade your protocols, and how aggressively caching anything expensive can contain as many of your current problems as possible. Valuable tips to get yourself ahead of the curve. (cm)
6. Fluid Typography Reimagined
Using relative units like em and rem for type has long been a best practice, and the concept of fluid typography with the new clamp() function has recently pushed us to incorporate viewport or container relative units into our font sizing as well. But are we responding to the right inputs when it comes to fluid typography?
After playing around with her user preferences, Miriam Suzanne came to the conclusion that the common approaches still offer room for improvement. In her post “Reimagining Fluid Typography,” she explores how we can avoid the calculation witchcraft and magic numbers that are usually involved in achieving responsive typography and why the best base font size for fluid type is the user’s default font size, set in the browser. Lots of valuable takeaways are guaranteed. (cm)
7. Web Platform Cheatsheet
The web platform is constantly evolving, getting more powerful as new features are being developed and added to browsers. However, to harness that power, we need to know what’s going on — and we all know that staying on top of all the latest developments isn’t always easy.
Patrick Brosset wanted to change that and created a cheatsheet to help web developers navigate the web platform. It highlights ways to keep track of what you can use, what’s new in browsers, and ways you can influence the development of the platform by making your voice heard. One for the bookmarks. (cm)
8. Scheduler.yield
A page that feels sluggish and unresponsive is one of the most frustrating things a user can experience when interacting with a website. It happens when long tasks keep the main thread busy and prevent it from other important work, like responding to user input. The new scheduler.yield() method helps us break up long tasks to avoid that.
Compared to other functions that can be used to break up tasks (e.g., setTimeout and scheduler.postTask), scheduler.yield() comes with an advantage: It prioritizes the continuation of a task over starting new tasks, removing the risk of delays between yielding to the main thread and completing the task. In his comprehensive guide to scheduler.yield, Brendan Kenny summarized in detail how it works. The API is currently only available in Chromium-based browsers, so if you decide to use it, you will need a fallback for other browsers. (cm)
9. 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 →
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.