Element-specific styling, styling dad and mom primarily based on their youngsters, relative colours — the net platform goes by way of thrilling occasions, and plenty of issues that required JavaScript previously can as we speak be achieved with one easy line of HTML and CSS.
As we’re transferring in the direction of 2025, it’s an excellent time to revisit a few of the unbelievable new applied sciences which can be broadly obtainable and supported in fashionable browsers as we speak. Let’s dive proper in and discover how they will simplify your day-to-day work and make it easier to construct fashionable UI parts.
Desk of Contents
Under you’ll discover fast jumps to subjects you might be involved in, or skip the desk of contents.
CSS Container Queries And Type Queries
Element-specific styling? What has lengthy seemed like a dream to any developer, is slowly however certainly turning into actuality. Because of container queries, we will now question the width and magnificence of the container wherein parts stay.

As Una Kravets factors out in her introduction to type queries, this presently solely works with CSS customized property values, however there are already some real-world use circumstances the place type queries shine: They arrive in notably useful when you might have a reusable element with a number of variations or if you don’t have management over all your kinds however want to use modifications in sure circumstances.
If you wish to dive deeper into what’s doable with container type queries and the issues we will — possibly — stay up for sooner or later, additionally be certain to check out Geoff Graham’s put up. He dug deep into the extra nuanced elements of favor queries and summarized the issues that stood out to him.
No Extra Typographic Orphans And Widows
Everyone knows these headlines the place the final phrase breaks onto a brand new line and stands there alone, breaking the visible and searching, nicely, odd. After all, there’s the nice ol’
to interrupt the textual content manually or a to divide the content material into totally different components. However have you ever heard of
text-wrap: stability
already?

text-wrap: stability
. (Massive preview)By making use of the text-wrap: stability
property, the browser will robotically calculate the variety of phrases and divide them equally between two traces — excellent for web page titles, card titles, tooltips, modals, and FAQs, for instance. Ahmad Shadeed wrote a useful information to text-wrap: stability
wherein he takes an in depth have a look at the property and the way it may help you make your headlines look extra constant.
When coping with massive blocks of textual content, reminiscent of paragraphs, you may need to look into text-wrap: fairly
to stop orphans on the final line.
Auto Discipline-Sizing For Varieties
Discovering simply the correct dimension for an enter area normally includes a whole lot of guesswork — or JavaScript — to rely characters and enhance the sector’s peak or width as a person enters textual content. CSS field-sizing
is right here to vary that. With field-sizing, we will auto-grow inputs and textual content areas, but additionally auto-shrink quick choose menus, so the shape at all times matches content material dimension completely. All we have to make it occur is one line of CSS.

Adam Argyle summarized all the things it’s essential learn about field-sizing, exploring intimately how field-sizing
impacts totally different parts. To stop your enter fields from turning into too small or too massive, it is usually a good suggestion to insert some extra kinds that preserve them in form. Adam shares a code snippet that you may copy-and-paste straight away.
Making Hidden Content material Searchable
Accordions are a preferred UI sample, however they arrive with a caveat: The content material contained in the collapsed sections is inconceivable to look with find-in-page search. Through the use of the hidden=until-found
attribute and the beforematch
occasion, we will resolve the issue and even make the content material accessible to serps.

hidden=until-found
makes hidden content material in accordions searchable. (Massive preview)As Joey Arhar explains in his information to creating collapsed content material searchable, you possibly can exchange the kinds that disguise the part with the hidden=until-found
attribute. In case your web page additionally has one other state that must be stored in sync with whether or not or not your part is revealed, he recommends including a beforematch
occasion listener. It is going to be fired on the hidden=until-found
component proper earlier than the component is revealed by the browser.
It’s a small improve for the component, however a mighty one: We are able to now add
into the record of choose choices, and they’ll seem as separators to assist visually break up the choices within the record.

If you wish to refine issues additional, additionally be certain to check out . The HTML component allows you to group choices inside a
component by including a subheading for every group.
Generally, you want a fast and straightforward strategy to make a component a scrollable container. CSS scroll snap makes it doable. The CSS characteristic permits us to create a well-controlled scrolling expertise that lets customers exactly swipe left and proper and snap to a selected merchandise within the container. No JavaScript required.

Ahmad Shadeed wrote a sensible information that walks you step-by-step by way of the method of establishing a container with scroll snap. You should utilize it to create picture galleries, avatar lists, or different parts the place you desire a person to scroll and snap by way of the content material, whether or not it’s horizontally or vertically.
Whether or not you employ it for footnotes, tooltips, connector traces, visible cross-referencing, or dynamic labels in charts, the CSS Anchor Positioning API permits us to natively place parts relative to different parts, often known as anchors.

In her introduction to the CSS Anchor Positioning API, Una Kravets summarized intimately how anchor positioning works. She takes a better have a look at the mechanism behind anchor positioning, learn how to tether to at least one and a number of anchors, and learn how to dimension and place an anchor-positioned component primarily based on the scale of its anchor. Browser assist remains to be restricted, so that you may need to use the API with some precautions. Una’s information consists of what to be careful for.
Excessive-Definition Colours With OKLCH And OKLAB
With high-definition colours with LCH, okLCH, LAB, and okLAB that give us entry to 50% extra colours, the occasions of RGB/HSL may be over quickly. To get you acquainted with the brand new coloration areas, Vitaly wrote a fast overview of what it’s essential know.

Each OKLCH and OKLAB are primarily based on human notion and might specify any coloration the human eye can see. Whereas OKLAB works finest for wealthy gradients, OKLCH is a incredible match for coloration palettes in design techniques. OKLCH/OKLAB colours are totally supported in Chrome, Edge, Safari, Firefox, and Opera. Figma doesn’t assist them but.
Relative Colours In CSS
Let’s say you might have a background coloration and need to cut back its luminosity by 25%, otherwise you need to use a complementary coloration with out having to calculate it your self. The relative coloration syntax (RCS) makes it doable to create a brand new coloration primarily based on a given coloration.

To derive and compute a brand new coloration, we will use the from
key phrase for coloration features (coloration()
, hsl()
, oklch()
, and many others.) to modify the values of the enter coloration. Adam Argyle shares some code snippets of what this appears to be like like in observe, or verify the spec for extra particulars.
Easy Transitions With The View Transitions API
There are a variety of use circumstances the place a easy visible transition could make the person expertise extra participating. When a thumbnail picture on a product itemizing web page transitions right into a full-size picture on the product element web page, for instance, or when you might have a mounted navigation bar that stays in place as you navigate from one web page to a different. The View Transitions API helps us create seamless visible transitions between totally different views on a web site.

View transitions might be triggered not solely on a single doc but additionally between two totally different paperwork. Each depend on the identical precept: The browser takes snapshots of the outdated and new states, the DOM will get up to date whereas rendering is suppressed, and the transitions are powered by CSS Animations. The one distinction lies in the way you set off them, as Bramus Van Damme explains in his information to the View Transitions API. various to single web page apps that usually depend on heavy JavaScript frameworks.
Unique Accordions
The ‘unique accordion’ is a variation of the accordion element. It solely permits one disclosure widget to be open on the identical time, so when a person opens a brand new one, the one that’s already open will likely be closed robotically to save lots of area. Because of CSS, we will now create the impact and not using a single line of JavaScript.

To construct an unique accordion, we have to add a title
attribute to the
parts which have the identical title
worth type a semantic group and behave as an unique accordion. Bramus Van Damme summarized intimately the way it works.
Reside And Late Validation
After we use :legitimate
and :invalid
to use styling primarily based on a person’s enter, there’s a draw back: a type management that’s required and empty will match :invalid
even when a person hasn’t began interacting with it but. To stop this from taking place, we normally needed to write stateful code that retains monitor of enter a person has modified. However not anymore.

:user-valid
and :user-invalid
enhance the person expertise of enter validation. (Massive preview)With :user-valid
and :user-invalid
, we now have a local CSS resolution that handles all of this robotically. Opposite to :legitimate
and :invalid
, the :user-valid
and :user-invalid
pseudo-classes give customers suggestions about errors solely after they’ve modified the enter. :user-valid
and :user-invalid
work with enter, choose, and textarea controls.
Think about you might have a scrolling field and a sequence of hyperlinks that goal an anchored place contained in the field. When a person clicks on one of many hyperlinks, it is going to take them to the content material part contained in the scrolling field — with a somewhat abrupt leap. The scroll-behavior
property makes the scrolling transition so much smoother, solely with CSS.

scroll-behavior
units the conduct for a scrolling field when scrolling is triggered by the navigation. (Massive preview)When setting the scroll-behavior
worth to easy
, the scrolling field will scroll in a easy vogue utilizing a user-agent-defined easing operate over a user-agent-defined time frame. After all, you can even use scroll-behavior: auto
, and the scrolling field will scroll immediately.
Making Focus Seen
Focus kinds are important to assist keyboard customers navigate a web page. Nevertheless, for mouse customers, it may be irritating when a spotlight ring seems round a button or hyperlink as they click on on it. :focus-visible
is right here to assist us create the perfect expertise for each person teams: It shows focus kinds for keyboard customers and hides them for mouse customers.

:focus-visible
reveals focus kinds solely when essential. (Massive preview):focus-visible
applies whereas a component matches the :focus
pseudo-class and the Consumer Agent determines through heuristics that the main target must be made seen on the component. Curious the way it works in observe? MDN Internet Docs highlights the variations between :focus
and :focus-visible
, what it’s essential contemplate accessibility-wise, and learn how to present a fallback for outdated browser variations that don’t assist :focus-visible
.
Styling Mother and father Based mostly On Kids
Traditionally, CSS selectors have labored in a top-down vogue, permitting us to type a baby primarily based on its father or mother. The brand new CSS pseudo-class :has
works the opposite means spherical: We are able to now type a father or mother primarily based on its youngsters. However that’s not all but. Josh W. Comeau wrote a incredible introduction to :has
wherein he explores real-world use circumstances that present what the pseudo-class is able to.

:has
makes it doable to type one component primarily based on the property or standing of some other component. (Massive preview):has
just isn’t restricted to parent-child relationships or direct siblings. As an alternative, it lets us type one component primarily based on the properties or standing of some other component in a very totally different container. And it may be used as a kind of world occasion listener, as Josh reveals — to disable scrolling on a web page when a modal is open or to create a JavaScript-free darkish mode toggle, for instance.
Interpolate Between Values For Kind And Spacing
CSS comparability features min()
, max()
, and clamp()
are as we speak supported in all main browsers, offering us with an efficient strategy to create dynamic layouts with fluid kind scales, grids, and spacing techniques.

To get you match for utilizing the features in your initiatives straight away, Ahmad Shadeed wrote a complete information wherein he explains all the things it’s essential learn about min()
, max()
, and clamp()
, with sensible examples and use circumstances and together with all of the factors of confusion you may encounter.
When you’re in search of a fast and straightforward strategy to create fluid scales, the Fluid Kind Scale Calculator by Utopia has received your again. All it’s essential do is outline min and max viewport widths and the variety of scale steps, and the calculator offers you with a responsive preview of the dimensions and the CSS code snippet.
Dependable Dialog And Popover
When you’re in search of a fast strategy to create a modal or popup, the HTML component lastly gives a local (and accessible!) resolution that can assist you get the job accomplished. It represents a modal or non-modal dialog field or different interactive element, reminiscent of a affirmation immediate or a subwindow used to enter knowledge.

menus for blocking pop-ups and popovers for non-blocking menus. (Massive preview)Whereas modal dialog packing containers interrupt interplay with a web page, non-modal dialog packing containers enable interplay with the web page whereas the dialog is open. Adam Argyle revealed some code snippets that present how can block pop-ups and popovers for non-blocking menus, out of the field.
Responsive HTML Video And Audio
In 2014, media attribute assist for HTML video sources was deleted from the HTML normal. Final 12 months, it made a comeback, which implies that we will use media queries for delivering responsive HTML movies.

Scott Jehl summarized how responsive HTML video — and even audio — works, what it’s essential contemplate when writing the markup, and what different kinds of media queries can be utilized together with HTML video.
The Proper Digital Keyboard On Cellular
It’s a small element, however one which provides to a well-considered person expertise: displaying the most snug touchscreen keyboard to assist a person enter their data with out having to change forwards and backwards to insert numbers, punctuation, or particular characters like an @
image.

To indicate the correct keyboard format, we will use inputmode
. It instructs the browser which keyboard to show and helps values for numeric, phone, decimal, e mail, URL, and search keyboards. To additional enhance the UX, we will add the enterkeyhint
attribute: it adjusts the textual content on the Enter key. If no enterkeyhint
is used, the person agent may use contextual data from the inputmode
attribute.
A Look Into The Future
As we’re beginning to undertake all of those shiny new front-end options in our initiatives, the net platform is, in fact, consistently evolving — and there are some thrilling issues on the horizon already! For instance, we’re very near getting masonry format, totally customizable drop-downs with
, and text-box trimming for adjusting fonts to be completely aligned throughout the grid. Kudos to all of the great people who find themselves working tirelessly to push the net ahead! 👏
Within the meantime, we hope you discovered one thing useful on this put up that you may apply to your product or software straight away. Comfortable tinkering!
Smashing Weekly Publication
You need to keep on prime of what’s taking place on this planet of front-end and UX? With our weekly publication, we goal to convey you helpful, sensible tidbits and share a few of the useful issues that folk are engaged on within the internet trade. Each challenge is curated, written, and edited with love and care. No third-party mailings or hidden promoting.
Additionally, if you subscribe, you actually assist us pay the payments. Thanks to your variety assist!

(vf, il)