The big comeback of native : when CSS and HTML finally simplify your UI components

In 2025, Web UI is hitting turbo mode: browsers are finally delivering primitives that replace hundreds of lines of handcrafted JS. Popovers, anchor positioning, scroll-driven animations, fully stylable selects – the native foundation is growing thicker and reshaping the way you build design systems.

Are you coding carousels, hover cards, forms ? Get ready for massive refactoring !

The new era of native UI development

The web no longer just executes your components – it now understands them, aligns them, animates them, positions them, and deactivates them with precision.

This gradual shift towards native, declarative, and standardised UI development is transforming the way front-end developers design interfaces. Goodbye fragile polyfills and clunky JavaScript wrappers : modern browsers now natively support mechanics once reserved for heavy frameworks.

A new level of cross-browser convergence

For years, progress was slowed by fragmented implementations. But today, CSS and HTML APIs are evolving at breakneck speed. What was once experimental is now baseline – in other words, stable enough for production in at least one rendering engine.

The big change ? The unification lag between Chrome, Safari and Firefox is shrinking dramatically. Complex features – like scroll-driven animations, anchor positioning or scroll buttons – are becoming interoperable as soon as they’re standardised, thanks to programmes like Interop 2025, which actively coordinates the roadmaps of Blink, WebKit and Gecko.

Focus #1: the customisable <select> is finally here

Styling <select>: until now, a nightmare

Among native HTML elements, few have been as frustrating as <select>. Sure, it’s functional. It has built-in accessibility and form integration.

But as soon as you tried applying custom branding, the black box closed. Each browser enforced its own rendering. Fonts, colours, icons, or dropdown layouts? Off limits.

Most developers ended up hiding the original <select> and rebuilding a custom version with <div>, <ul>, JavaScript, and plenty of frustration – fragile, unmaintainable, and usually inaccessible.

A fresh technical foundation

That lock is finally breaking, thanks to three key HTML/CSS evolutions, now available in most modern browsers:

• Popover API : no more juggling DOM manipulation or z-index hacks. The Popover API natively manages dropdown overlays. It handles focus, ensures top-layer rendering, and supports light-dismiss (auto-close on outside click). All without JavaScript.

• Anchor Positioning : forget absolute position calculations. With this new CSS tool, you simply declare a link between the trigger button and the option list.
  The browser handles placement, viewport collisions, fallback positions, and responsiveness – in a single line.

• Command Invokers : inline onClick handlers are on their way out. With the command and commandfor attributes, you can now define purely declarative HTML interactions – open, close, trigger actions – without writing a single line of JavaScript.
  This makes code more readable, leverages native browser behaviours, and improves accessibility, especially for keyboard and assistive tech users.

Rethinking <select> : fully stylable

The innovation lies not in recreating the component, but reinventing it natively. A new value for the appearance property unlocks full styling:

select {

appearance: base-select;

}

This gives access to powerful pseudo-elements :

• ::picker – targets the clickable dropdown trigger.

• ::selected-content – controls display of the selected option.

• ::marker – styles the indicator for the active option.

You keep native behaviours (keyboard input, navigation, form validation) while fully customising appearance. The UX remains smooth. The DOM stays lean. The JS disappears.

Focus #2: carousels, now CSS-native

A long-time Front-End headache

The carousel – as popular as it is dreaded. Common in modern UIs (galleries, products, onboarding), it comes with chronic issues :

• Complex state (active item, navigation limits, sync).

• Accessibility often ignored.

• Scroll behaviour inconsistent across browsers.

• And worst of all : lots of JavaScript just to make it work.

Three CSS innovations that change everything

• scroll-buttons : left/right arrows become native CSS pseudo-elements. Declare them, and the browser inserts, manages, and auto-disables them as needed. Example:

.carousel::scroll-button(left) {

content: "←";

}

.carousel::scroll-button(right) {

content: "→";

}

• scroll-marker + scroll-marker-group : native pagination is here. Each carousel item generates its own marker, which you can style, position, and link to click or keyboard navigation.

• :target-current : a CSS selector to target the currently visible carousel item. Highlight the active image, resize it, or animate transitions – no JS required.

Supporting CSS features that make integration easier

• scrollbar-width: none – hide horizontal scrollbars cleanly.

• scroll-snap-type, scroll-snap-align – ensure smooth element alignment.

• anchor-positioning – lock buttons and markers exactly in place, even if dimensions shift.

Focus #3: hover cards (contextual panels)

A ubiquitous but painful pattern

Hover cards are everywhere: user profiles, link previews, article summaries, product details. Hover over an element, and a rich interactive panel pops up.

The issue ? While familiar to users, they’re a technical nightmare :

• Multiple triggers (click, hover, keyboard focus, long-press).

• Competing event handling, delays, unwanted popups, broken states.

• Accessibility often forgotten (broken focus, no screen reader support).

Even top teams spend months building robust versions – and still end up with fragile, incomplete, mobile-unfriendly solutions.

interest-target: Native hover cards at last

A new HTML feature, currently in origin trial in Chrome, changes everything. interest-target allows popovers to be invoked not just by click, but by user intent, detected contextually:

• Hover for pointer devices.

• Tab focus for keyboards.

• Long press for touch devices.

Simply swap popover-target with interest-target, and the element appears automatically at the right time – no scripts, no event listeners.

Configurable entry & exit delays… in CSS

Each interaction can now have custom delays, with a single CSS declaration :

a[interesttarget] {

interest-target-delay-in: 0s;

interest-target-delay-out: 1s;

}

This enables effects like keeping a popover open briefly after losing focus, or preventing it from opening if the pointer hovers for just a split second.

:has-interest : A contextual pseudo-class

A brand-new pseudo-class, :has-interest, detects the element targeted by an interest-based interaction. It complements :hover and :focus with one unified, coherent selector.

The result ? Smooth behaviour across all interaction types, without bloated rules or broken animations.

Scroll-driven animations & scroll state queries

Powerful tools for motion-synced uIs

The new scroll APIs transform scrolling into a high-performance, native animation engine.

• @scroll-timeline: ties a CSS animation to scroll position.

• @keyframes: unchanged, but now synchronised via scroll timelines.

• Scroll-state queries: three new queries detect scroller states:

  • scrollable: overflow present or not.

  • stuck: sticky elements.

  • snapped: snap-anchored elements.

These work like media or container queries – but driven by scroll conditions.

Practical use cases with real UX impact

• Scroll indicator : a simple ::after gradient signals hidden content.

• Back-to-top button : only visible when scrolling (:not(scrollable)), animated with @scroll-timeline.

• Zoom active carousel item : @container scroll-state(snapped) highlights the visible card – no JS, no DOM mutations.

Perspectives & ecosystem

Major platforms taking action

Standards only matter when adopted. And adoption is happening fast.

• Google Search is experimenting with CSS-first carousels, cutting up to 75% of bundled JavaScript. The goal: free critical resources, speed async rendering, and preserve interactivity. The result? Faster, more stable, and SEO-friendly rendering.

• Elementor (powering 12%+ of WordPress sites) is reworking components using native scroll-buttons, :target-current, and scroll-markers. By removing 165kb of JavaScript, they’ve gained massive performance boosts while keeping pixel-perfect designer fidelity.

Standards that keep growing

And this is only the beginning. The CSS/HTML ecosystem continues to expand, with features under stabilisation or preview in some browsers:

• sibling-index / sibling-count: target/animate based on sibling position.

• calc-size / interpolate-size: finally animate between height: 0 and height: auto.

• text-box-trim, text-box-edge: advanced typography, precise vertical control.

• responsive-shape(): adaptive fluid shapes, no SVG or media queries.

• CSS mixins: declarative style modularisation, a native @apply equivalent.

All pushing towards the same goal: making CSS a complete, readable, modular, high-performance description language.

The era of duct-taped utility CSS is fading, replaced by clear, state-driven compositions.

A community-driven dynamic

These advances don’t come from one vendor, but from structured collaboration across developers, browser teams, and standards groups.

Open UI, the CSS Working Group, and WHATWG now integrate real-world feedback from product teams. They no longer design abstract APIs in isolation – they solve the actual problems faced by thousands of teams worldwide.

That’s why the developer community voice remains crucial. Experiment with new features, document bugs, report limitations, propose use cases – all directly shape the final specs.

By enabling flags, joining origin trials, or contributing on forums and GitHub issues, you’re helping to build the web of tomorrow.

This article is a comprehensive summary of the video “What’s New in Web UI” by Chrome for Developers.