Hej Smashing Friends,

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.

New free online workshop: Fixing Frustrating Design Patterns For 2025 — with yours truly Vitaly Friedman. Save your spot.

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

From our sponsor

Optimize Your Website Speed With Real User Data

There’s tons of free tools to test your website speed. But to see how fast your website really is you need real user monitoring (RUM). DebugBear tracks your performance metrics and gives you in-depth reports to debug them, including request waterfalls and interaction elements. Find out about DebugBear RUM.

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.

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:

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

From our sponsor

Get The 2024 State Of Frontend Report With Business Insights

With 89.3% of devs coding with AI, 25% skipping tests, and 81.3% prioritizing performance, this report uncovers the latest in the frontend industry. Based on surveys from 6,288 developers and 260 managers worldwide. Read the full report now.

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)

From our friends

Ready For BTConf In Berlin? Join Us Nov. 7–8!

Meet the Smashing Team at this friendly, authentic event — with inspiring talks and a chance to connect with amazing speakers Miriam Suzanne, Linda Liukas, Manuel Matuzovic, Jessica Hische, Sophie Koonin, Christine Vallaure, Jan De Coster, & many more! Stay curious, and join SmashingConf’s co-founder Marc Thiele for a couple of days celebrating the craft we all love! Have a look and secure a ticket.

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 →

It’s here, and it’s shipping! Success At Scale, a new book by Addy Osmani. Get the book or browse the complete library.

9. Recent Smashing Articles

• Why Optimizing Your Lighthouse Score Is Not Enough For A Fast Website
• Ingredients For A Cozy November (2024 Wallpapers)
• Designing For Gen Z: Expectations And UX Guidelines
• CSS min() All The Things

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 Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Follow us on Twitter • Join us on Facebook