Hej Smashing Friends,
As we are moving towards 2025, it’s 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.
The venue for SmashingConf Antwerp, with just a handful of tickets left — all around design and UX. With hands-on workshops.
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:
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 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)
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.
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.
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:
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)
From our sponsor
It’s Time To Change The Way We Build Digital Products.
Keeping busy is easy. Driving business impact is what matters. Consistently align your people to the most strategic priorities, discover product opportunities from deep customer insights, and gain total visibility on execution with Airtable ProductCentral.
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)
From our friends
Looking for an event that bridges the gap between tech and design? Beyond Tellerrand is exactly where you need to be — with Linda Liukas (who speaks about her playgrounds on which children learn programming without computers), Jessica Hische (who talks about her career as a designer and author), alongside Manuel Matuzovic, Sophie Koonin, Hidde de Vries, and many other speakers who will be in Berlin next month. Sounds interesting? Have a look and secure a ticket.
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?
It’s here, and it’s shipping! Success At Scale, a new book by Addy Osmani. Get the book or browse the complete library.
10. Recent Smashing Articles
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
