0%

The Web Platform Is Eating JavaScript: What’s New in HTML, CSS, and JS

Web development

For most of the last decade, the split was simple: HTML for structure, CSS for looks, JavaScript for anything that needed to behave. That line has been blurring fast. Popovers, page transitions, scroll animations, tooltip positioning — things that used to mean reaching for a library are now just… native. Here’s a roundup of what’s actually shipped and worth using, across HTML, CSS, and JS, plus a note on what this means if you build on Shopify.

HTML: the Popover API

Dropdowns, tooltips, and overlay menus used to mean manual z-index wrangling, click-outside listeners, and manual focus management. The popover attribute handles all of that natively:

<button popovertarget="menu">Open menu</button>

<div id="menu" popover>
  <a href="/account">Account</a>
  <a href="/orders">Orders</a>
</div>

That’s it. The browser handles top-layer stacking (so it renders above everything, no z-index fights), light-dismiss on outside click, and Escape-to-close. Pair it with the <dialog> element for anything that needs to trap focus modally, like a cart drawer or confirmation prompt.

CSS: the big three

:has() — the “parent selector” CSS never had. Style a container based on what’s inside it:

.form-group:has(input:invalid) {
  border-color: red;
}

.card:has(img) {
  grid-template-rows: auto 1fr;
}

Scroll-driven animations — animate based on scroll position, with zero JavaScript and zero IntersectionObserver:

.reveal {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

animation-timeline: view() ties the animation’s progress to the element’s visibility inside its scroll container — the native replacement for “fade in on scroll” libraries.

The View Transitions API — smooth crossfades and morphs between page states, configured almost entirely in CSS:

@view-transition {
  navigation: auto;
}

.product-thumbnail {
  view-transition-name: product-hero;
}

Name matching elements across a navigation with view-transition-name, and the browser animates between them automatically — no animation library, no manual FLIP calculations.

A caveat worth flagging: cross-document View Transitions and scroll-driven animations are newer than :has(), so check current browser support before shipping them without a fallback — Firefox in particular has lagged on cross-page transitions.

JavaScript: less of it, in the right places

The honest JS story in 2026 isn’t a flashy new syntax feature — it’s that a lot of what JS used to do for UI polish now belongs in CSS. Scroll listeners for reveal animations, imperative popover positioning, page-transition libraries like a heavier animation framework — all things you can now delete from a bundle. That’s not nothing: fewer dependencies, less main-thread work, fewer edge cases to debug.

Where JS still earns its keep is state, data, and logic — form validation rules, fetches, cart logic, anything genuinely dynamic. The practical shift is knowing which of your existing JS is actually replaceable now, and pulling it out.

What this means if you build on Shopify

Shopify themes render server-side Liquid with a thin layer of JS on top, which makes them a great fit for this shift:

  • Popover API is a clean native replacement for the hand-rolled dropdown/mega-menu JS in a lot of theme headers.
  • View Transitions work well for product-card-to-product-page navigations — matching a view-transition-name on the product image gives you a native “hero” transition between the collection grid and the product page, without a single-page-app rewrite.
  • Scroll-driven animations are a solid, dependency-free way to handle the “fade in as you scroll” effects common in Shopify hero and featured-collection sections, instead of shipping a scroll-animation library in theme.js.

None of this requires Hydrogen or a JS framework — it’s plain Liquid markup plus a few lines of CSS, which keeps theme bundles lighter and easier to maintain.

Where to start

If you only pick up one thing from this list, make it scroll-driven animations — it’s the highest ratio of “code you delete” to “code you add,” and the visual payoff is immediate.