October 22, 2024 Smashing Newsletter: Issue #479
This newsletter issue was sent out to 194,404 subscribers on Tuesday, October 22, 2024.
Editorial
As we are moving towards 2025, it’s a good time to revisit what’s new in front-end. We’ll be running an online workshop on New Front-End Adventures in 2025 in early January. We’ll dive into everything from anchor positioning to accessibility to Interaction To Next Paint (INP). Get an early-bird ticket.
In this newsletter, we explore some of these technologies — field-sizing, CSS style queries, snapping, and View Transitions API — working beautifully in modern browsers. Hopefully, you’ll find something useful in there.
In the Smashing department, we are heading to beautiful Antwerp, Belgium, for our very last conference of the year — SmashingConf Antwerp (UX) 🍫, focused on design systems, AI interfaces, design patterns, UX research, dashboards and DataViz. We have just a handful of last tickets left! 🎉🥳
A few more Smashing events taking place soon:
- Smashing Meets Product Design 🚀 (Dec 5) — our new Meets on product design and UX,
- New Online Smashing Workshops 🤹🏼 — on HTML email, UX and front-end,
- Smart Interface Design Patterns UX Training 🍣 — starting Nov 1, with yours truly,
- Measure UX and Design Impact 🧪 — shiny new video course + UX training with yours truly.
With that, let’s dive into some of the shiny gems in front-end!
Have a productive week, everyone!
— Vitaly
1. CSS Container Queries And Style Queries
Component-specific styling? What has long sounded like a dream to any developer is slowly but surely becoming a reality. Thanks to container queries, we can now query the width and style of the container in which components live.
As Una Kravets points out in her introduction to style queries, this currently only works with CSS custom property values, but there are already some real-world use cases where style queries shine: They come in particularly handy when you have a reusable component with multiple variations or when you don’t have control over all of your styles but need to apply changes in certain cases.
If you want to dive deeper into what’s possible with container style queries and the things we can — maybe — look forward to in the future, also be sure to take a look at Geoff Graham’s post. He dug deep to learn more about some of the more nuanced aspects of style queries and jotted down the things that stood out to him. Exciting times are ahead for CSS! (cm)
2. Auto Field-Sizing For Forms
Finding just the right size for an input field usually involves a lot of guesswork or JavaScript to count characters and increase the field’s height or width as a user enters text. CSS field-sizing is here to change that. With field-sizing, we can auto-grow inputs and text areas, but also auto-shrink short select menus, so the form always fits content size perfectly. All we need to make it happen is one line of CSS.
Adam Argyle summarized everything you need to know about field-sizing, exploring in detail how field-sizing affects different <form> elements. To prevent your input fields from becoming too small or too large, it is also a good idea to insert some additional styles that keep them in shape. Adam shares a code snippet that you can copy-and-paste right away. (cm)
3. Making Hidden Content Searchable
Accordions are a popular UI pattern, but they come with a caveat: The content inside the collapsed sections is impossible to search using find-in-page search. By using the hidden=until-found attribute and the beforematch event, we can solve the problem and even make the content accessible to search engines.
As Joey Arhar explains in his guide to making collapsed content searchable, you can replace the styles that hide the section with the hidden=until-found attribute. If your page also has another state that needs to be kept in sync with whether or not your section is revealed, he recommends adding a beforematch event listener. It will be fired on the hidden=until-found element right before the element is revealed by the browser. (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:
- Interface Design Patterns UX Training (Autumn 2024) ux
with Vitaly Friedman. Nov 1 – Dec 2 - 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 →
5. Simpler Snapping For Scalable Containers
Sometimes, you need a quick and easy way to make an element a scrollable container. CSS scroll snap makes it possible. The CSS feature enables you to create a well-controlled scrolling experience that lets users precisely swipe left and right and snap to a specific item in the container. No JavaScript required.
Ahmad Shadeed wrote a practical guide that walks you step by step through the process of setting up a container with scroll snap. You can use it to create image galleries, avatar lists, or other components where you want a user to scroll and snap through the content, whether it’s horizontally or vertically. (cm)
6. New Video Course: How To Measure UX And Design Impact
🎉 After many years, we’re happy to finally launch “How To Measure UX and Design Impact” (8h), a new practical guide for designers, researchers, and UX leads to measure and visualize your UX impact on business. Use the code IMPACT to save 20% off today. Jump to details.
From establishing team-specific design KPIs to translating ambiguous objectives into practical design goals and making sense of OKRs, SUS, UMUX-Lite, TPI, KPI trees, feedback scoring, gap analysis, and Kano model, the course is filled with plenty of examples to help you measure UX. Jump to details.
7. Anchor Positioning For Tooltips And Popovers
Whether you use it for footnotes, tooltips, connector lines, visual cross-referencing, or dynamic labels in charts, the CSS Anchor Positioning API enables us to natively position elements relative to other elements, known as anchors. So, how can we make the most out of anchor positioning?
In her introduction to the CSS Anchor Positioning API, Una Kravets summarized in detail how anchor positioning works. She takes a closer look at the mechanism behind anchor positioning, how to tether to one and multiple anchors, and how to size and position an anchor-positioned element based on the size of its anchor. Browser support is still limited, so you might want to use the API with some precautions. Una’s guide includes what to watch out for. (cm)
8. Smooth Transitions With The View Transitions API
There are a number of use cases where a smooth visual transition can make the user experience more engaging. When a thumbnail image on a product listing page transitions into a full-size image on the product detail page, for example, or when you have a fixed navigation bar that stays in place as you navigate from one page to another. The View Transitions API helps us create seamless visual transitions between different views on a site.
As Bramus Van Damme explains in his guide to the View Transitions API, view transitions can be triggered not only on a single document but also between two different documents. Both rely on the same principle: The browser takes snapshots of the old and new states, the DOM gets updated while rendering is suppressed, and the transitions are powered by CSS Animations. The only difference lies in how you trigger them. A small detail that can significantly improve the user experience. (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.