Component-specific styling and styling parents according to their children are just a few of the exciting new features that the web platform can now offer. Many things that used to require JavaScript can be achieved today with a simple line of HTML or CSS. As we move towards 2025, now is a great time to revisit the amazing new technologies that are widely available and supported by modern browsers. Let’s dive in and see how they can help you simplify your daily work and build modern UI components. Table of Contents Below, you can jump to topics that you might be interested in or skip the table. Anchor-positioning auto-field-sizing container questions exclusive accordions ;focus-visible high-definition colours in select inputmode min() max(), clamp() relative color responsive videos scroll behavior scroll snap-text-wrap: balance Scroll snap text-wrap : user-valid and ‘user-invalid’ View Transitions API CSS Container Questions And Style Queries Component specific styling? What was once a fantasy for developers is now becoming a reality. Container queries allow us to query the width and style for the container that contains components. Una Kravets explains in her introduction to the style queries that this only works for CSS custom property values. However, there are some real-world cases where style query shines: They come in handy when you have multiple variations of a component or when you do not have control over your styles, but need to make changes in certain situations. Geoff Graham has a great post that will help you understand what is possible with container style query and what we can expect in the future. He delved into the nuanced aspects and summarized what he found most interesting. No More Typographic Widows and Orphans We’ve all seen those headlines with the last word breaking onto a new page and standing alone. It breaks the visual and looks odd. There’s also the good ol’<br>To manually break the text or to divide it into different parts. Have you heard about text-wrap balance? Text-wrap: Balance is a property that allows the browser to automatically calculate the number words and divide them evenly between two lines. This is perfect for page titles and card titles. It can also be used for tooltips, FAQs, modals and tooltips. Ahmad Shadeed has written a guide on text-wrap balance, in which he explains the property and how you can use it to make your headlines more consistent. Text-wrap: pretty can be used to avoid orphans at the end of paragraphs. Auto Field-Sizing for Forms Finding the perfect size for an input form usually requires a lot guesswork — or JavaScript to count characters, and increase the height or width of the field as the user enters text. CSS field-sizing can change that. With field-sizing we can auto-grow text and input areas, but also auto shrink short select menus so that the form always fits perfectly. One line of CSS is all we need to do it. Adam Argyle explains everything you need about field-sizing and explores in detail how it affects different elements. It is a good idea, to prevent your input fields becoming too large or too small, to add some additional styles. Adam shares a code example that you can copy and paste right away. Making Hidden Content Searchable Accordions have become a popular UI design, but there is a catch: the content within the collapsed sections cannot be searched with find-in page search. By using the hidden=untilfound attribute and the priormatch event, we are able to solve the problem. We can even make the content searchable. Joey Arhar explains how to make collapsed content searchable in his guide. You can replace styles that hide a section with the hidden=untilfound attribute. He recommends adding an event listener to the beforematch event if your page has another state which needs to be synced with whether your section is revealed or not. It will be fired just before the browser reveals the hidden=until found element. Styling groups within select menus This is a small but powerful upgrade: we can now add to the list of options and they will appear visually as separators. You can refine your work by using. HTML lets you group options in an element by adding subheadings for each group. Simple Snapping for Scrollable Containers Sometimes you need an easy and quick way to make a container scrollable. CSS scroll snap allows it. CSS allows us to create a scrolling experience with a controlled speed that lets the user swipe left and right, and snap to an item within the container. No JavaScript is required. Ahmad Shadeed has written a guide that will walk you through the steps of setting up a scroll snap container. You can use it for image galleries, avatars lists, or any other component where you want the user to scroll through content horizontally or vertically. Anchor Positioning for Tooltips and Popovers The CSS Anchor Positioning API allows us to position elements natively relative to other elements. This is known as anchors. Una Kravets explains anchor positioning in detail in her introduction to CSS Anchor Positioning API. She explains the mechanism behind anchor position, how to tether an element to one or multiple anchors and how to size the element and position it based on its anchor size. You may want to take some precautions when using the API, as browser support is still limited. Una’s guide explains what to look out for. High-Definition Colours With OKLCH and OKLAB With high definition colors with LCH, okLCH, LAB, and OKLAB that give us 50% more colors, we might soon be done with RGB/HSL. Vitaly has written a quick guide to help you get familiar with the new color spaces. Both OKLCH & OKLAB are based upon human perception, and can specify any colour the human eye can perceive. OKLCH works well for color palettes and design systems. While OKLAB is best for gradients with rich colors, OKLCH is great for color palettes. OKLCH/OKLAB colours are fully supported by Chrome, Edge, Safari and Firefox. Figma does not support them yet. Relative Colors in CSS Say you have a color for your background and you want to reduce the brightness by 25% or you want to use complementary colors without having to calculate them yourself. The relative color syntax (RCS), allows you to create a color based on an existing color. The from keyword can be used to derive and calculate a new colour. Modify the values of the color input. Adam Argyle shows some code snippets to show how this works in practice. You can also check out the spec if you want more information. Smooth Transitions with The View Transitions api There are many use cases where a seamless visual transition can enhance the user experience. A thumbnail image on a listing page can transition into a full-size picture on the detail page. Or, a fixed navigation bar can stay in place while you navigate from one web page to another. The View Transitions API allows us to create seamless visual transitions from one view on a website to another. View transitions are not limited to a single document, but can also be triggered between two documents. Both rely upon the same principle: the browser takes snapshots in the old and new state, the DOM is updated while rendering has been suppressed, the transitions are powered through CSS Animations. Bramus Van Damme’s guide to the View Transitions API explains that the only difference is how you trigger it. This is a good alternative to single-page apps that rely heavily on JavaScript frameworks. Exclusive Accordions An exclusive accordion is a variation on the accordion component. It only allows for one disclosure widget to open at a time. When a user opens another, the existing one will be automatically closed to save space. CSS allows us to create the effect with no JavaScript. To create an exclusive accordion we need to add the name attribute to each element. This attribute forms a semantic group of elements with the same name and behaves as an exclusive accordion. Bramus Van Damme explains in detail how this works. Live and Late Validation When using :valid and:invalid to style based on user input, there is a downside: A form control that’s required and empty will match with :invalid despite the fact that a user hasn’t yet started interacting. To prevent this, we had to write stateful codes that kept track of the input a user changed. But no longer. We now have a native CSS that does all of this automatically with :user valid and :user invalid. Unlike :valid and:invalid, :uservalid and:userinvalid pseudo-classes only give feedback to users after they have made changes to the input. :user valid and :user invalid work with input, textarea, and select controls. Smooth Scrolling Imagine that you have a box with a scrolling feature and a set of links pointing to an anchor position within the box. When the user clicks one of the links it will take them directly to the content section within the scrolling box, with an abrupt jump. Scroll-behavior makes the scrolling transition much smoother. This property is only available in CSS. The scroll-behavior property will make the scrolling transition smoother, but only with CSS. You can also select scroll-behavior auto to have the scrolling box scroll instantly. Focus Styles are important for keyboard users to navigate a web page. For mouse users, however, it can be annoying when a focus circle appears around a link or button as they click on them. :focus visible is designed to create the best possible experience for both keyboard and mouse users. It displays focus styles on keyboard users, but hides them on mouse users. :focus-visible is applied when an element matches the pseudo-class :focus and the User Agent determines, via heuristics, that the focus should appear on the element. Curious about how it works? MDN Web Docs explains the differences between :focus, :focus visible, and what accessibility considerations you should take into account, as well as how to fallback to older browser versions that do not support :focus visible. Styling Parents based on Children CSS selectors historically worked top-down, allowing us style a child by referencing its parent. The new CSS pseudo class :has worked the other way around: we can now style a child based on a parent. But that’s still not all. Josh W. Comeau has written a fantastic introduction to the pseudo-class :has, in which he explores actual-world use cases. :has does not limit itself to parent-child or direct sibling relationships. It allows us to style an element based on any element’s properties or status in a completely different container. It can also be used to disable scrolling when a modal opens or to toggle dark mode without JavaScript, as Josh shows. Interpolate between Values for Type and Spacing CSS comparison function min(), max() and clamp() is supported by all major browsers today. This allows us to create dynamic layouts that include fluid type scales and grids. Ahmad Shadeed has written a comprehensive guide to help you get started using these functions right away. It includes practical examples, use cases, and all the confusion points you may encounter. Fluid Type Scale calculator by Utopia is a great tool for creating fluid scales quickly and easily. The calculator will provide you with a responsive preview and CSS code snippet after you enter the viewport widths, the number of steps and the min and max. Reliable Dialog and Popover If you are looking for a fast way to create a popup or modal, the HTML element offers a native solution. You can use this element to accomplish your task. It represents a non-modal or modal dialog box, or another interactive component such as a confirmation window or subwindow for entering data. Non-modal dialogs allow interaction with a webpage while the dialog box is open. Modal dialog boxes prevent interaction with a web page. Adam Argyle has published code snippets which show how to block pop-ups or popovers on non-blocking menus. Responsive HTML Audio And Video In 2014, media attributes support for HTML video sources were removed from the HTML standard. It made a return last year, meaning that we can now use media queries to deliver responsive HTML videos. Scott Jehl summarized responsive HTML video – and even audio – and what you should consider when writing markup. He also discussed what other media queries can be combined with HTML video. The Right Virtual Keyboard For Mobile It’s an insignificant detail, but it adds to the user experience. Displaying the most comfortable touchscreen to help a person enter their information, without having to switch back to insert numbers, punctuation or special characters such as @ symbols. Inputmode can be used to display the correct keyboard layout. It tells the browser what keyboard to display, and it supports numeric, phone, decimal (email, URL), search, and email keyboards. We can use the enterkeyhint to improve the UX by adjusting the text on Enter key. If the enterkeyhint attribute is not used, the user agent may use the contextual information in the inputmode attribute. The Future As the web platform continues to evolve, and we begin to use all these new front-end features, there are already some exciting things coming up! We are close to a masonry layout and fully customizable drop-downs, as well as text-box trimming to align fonts perfectly within the grid. All the wonderful people working tirelessly to move the web forward deserve a big thank you! We hope that you will find something useful in this post, which you can immediately apply to your application or product. Happy tinkering! Want to know what’s going on in the world of UX and front-end? Subscribe to Smashing Weekly. Our weekly newsletter aims to provide you with useful, practical information and share some of what people are working on within the web industry. Each issue is carefully curated, written and edited. No third-party mailings, or hidden advertising.

Subscribers also help us pay our bills. We appreciate your support!