November 5, 2024 Smashing Newsletter: Issue #481
This newsletter issue was sent out to 194,227 subscribers on Tuesday, November 5, 2024.
Editorial
As we keep searching for the most flexible front-end workflows and toolkits, it’s easy to forget how truly incredible some of the fundamentals on the web have become these days. Many things that required JavaScript in the past can now be achieved with one simple line of HTML and CSS.
This newsletter is a dedication to some of these useful front-end features that are now broadly available and supported for all of us to use in our work. Hopefully, there will be some useful pointers for you here and there.
And if you’d like to dive in deeper, here’s a selection of upcoming online workshops and trainings from the Smashing department:
- Design Patterns UX Training (last tickets!) with yours truly,
- Advanced Design Systems (Nov 12–20) with Brad Frost,
- Fixing Frustrating Design Patterns For 2025 (free!) with yours truly,
- Smashing Meets Product Design (Dec 5), a free online meet-up,
- Measure UX + Design Patterns (Bundle), video courses, use the coupon code SMASHING for a friendly 20% off!
And a sincere, warm thank you to everyone for your kind support, following, spreading the word, and being an all-around kind, thoughtful, and wonderful person. You are a bright and shining star — don’t you ever forget that! ★
— Vitaly
1. CSS Text Balancing
We all know those headlines where the last word breaks onto a new line and stands there alone, breaking the visual and looking, well, odd. Now, how can we do better? Of course, there’s the good ol’ <br> to break the text manually or a <span> to divide the content into different parts. But have you heard of text-wrap: balance already? Ahmad Shadeed takes a closer look at how the native CSS solution can help us make our headlines look more consistent.
By applying the text-wrap: balance property, the browser will automatically calculate the number of words and divide them equally between two lines. This not only comes in handy for headlines but also for page titles, card titles, tooltips, modals, and FAQs, as Ahmad shows.
For larger blocks of text, such as paragraphs, text-wrap: pretty is a native CSS solution to prevent orphans on the last line. And not only that, but it also adjusts hyphenation and previous lines to make room. (cm)
2. Exclusive Accordions
The ‘exclusive accordion’ is a variation of the accordion component. It only allows one disclosure widget to be open at the same time, so when a user opens a new one, the one that is already open will be closed automatically to save space. Thanks to CSS, we can now create the effect without a single line of JavaScript.
To build an exclusive accordion, we need to add a name attribute to the <details> elements. When this attribute is used, all <details> elements that have the same name value form a semantic group and behave as an exclusive accordion. Bramus Van Damme summarized in detail how it works. (cm)
3. Live And Late Validation
When we use :valid and :invalid to apply styling based on a user’s input, there’s a downside: a form control that is required and empty will match :invalid even if a user has not started interacting with it yet. To prevent this from happening, we usually had to write stateful code that keeps track of input a user has changed. Luckily, these days are over.
With :user-valid and :user-invalid, we now have a native CSS solution that handles all of this automatically. Contrary to :valid and :invalid, the :user-valid and :user-invalid pseudo-classes give users feedback about mistakes only after they have changed the input. :user-valid and :user-invalid work with input, select, and textarea controls. (cm)
4. Smooth Scrolling Behavior
Imagine you have a scrolling box and a series of links that target an anchored position inside the box. When a user clicks on one of the links, it will take them to the content section inside the scrolling box — with a rather abrupt jump. The scroll-behavior property makes the scrolling transition a lot smoother, only with CSS.
By setting the scroll-behavior value to smooth, the scrolling box scrolls in a smooth fashion using a user-agent-defined easing function over a user-agent-defined period of time. Of course, you can also use scroll-behavior: auto, and the scrolling box will scroll instantly. (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.
As always, here’s a quick overview:
- Advanced Design Systems workflow
with Brad Frost. Nov 12–20 - Figma Workflow Masterclass design
with Christine Vallaure. Nov 13–22 - Building Modern HTML Emails dev
with Rémi Parmentier. Dec 2–11 - How To Measure UX and Design Impact ux
with Vitaly Friedman. Dec 4–12 - Jump to all workshops →
6. CSS Comparison Functions
CSS comparison functions min(), max(), and clamp() are today supported in all major browsers, providing us with an effective way to create dynamic layouts with fluid type scales, grids, and spacing systems.
To get you fit for using the functions in your projects right away, Ahmad Shadeed wrote a comprehensive guide in which he explains everything you need to know, with practical examples and use cases and including all the points of confusion you might encounter.
If you’re looking for a quick and easy way to create fluid scales, the Fluid Type Scale Calculator by Utopia has got your back. All you need to do is define min and max viewport widths and the number of scale steps, and the calculator provides you with a responsive preview of the scale and the CSS code snippet. (cm)
7. Responsive HTML Video And Audio
In 2014, media attribute support for HTML video sources was deleted from the HTML standard. Last year, it made a comeback, which means that we can now use media queries for delivering responsive HTML videos.
Scott Jehl summarized how responsive HTML video — and even audio — works, what you need to consider when writing the markup, and what other types of media queries can be used in combination with HTML video. If you need to deliver large or long-duration videos, Scott also looks into HTTPS Live Streaming as a more robust — but JavaScript-dependent — alternative. (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 →
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.