The 2026 web platform baseline

The set of web platform features that work everywhere without a polyfill is substantially larger than most developers' mental model of it, because that mental model was formed during a decade when it was not true.

Here is what is now safe, and what it lets you delete.

CSS that replaces JavaScript#

Container queries. Style based on the container's size, not the viewport.

.card-grid { container-type: inline-size; }

@container (min-width: 30rem) {
  .card { display: grid; grid-template-columns: 8rem 1fr; }
}

This is the feature that makes genuinely reusable components possible. A component that adapts to the space it is given, wherever it is placed, without knowing about the page. Media queries never could do this and every component library worked around it with JavaScript resize observers.

Delete the resize observers.

:has(). The parent selector, requested for twenty years.

/* a form field that has an invalid input */
.field:has(input:invalid) { border-color: var(--error); }

/* a card that contains an image gets different padding */
.card:has(img) { padding-top: 0; }

/* style a label based on its checkbox */
label:has(:checked) { font-weight: 600; }

An enormous amount of state-syncing JavaScript exists purely to add a class to a parent based on a child's state. All of it can go.

Nesting. Native CSS nesting works. For a lot of projects this removes the primary reason to run a preprocessor.

:is(), :where(), cascade layers. Specificity is finally manageable. @layer in particular lets you define an explicit cascade order rather than fighting specificity with !important.

interaction without JavaScript#

Popover API. Declarative popovers, tooltips, and menus with top-layer rendering, light-dismiss, and focus management handled by the browser.

<button popovertarget="menu">Options</button>
<div id="menu" popover>...</div>

That is the whole implementation. No positioning library, no click-outside handler, no focus trap, no escape-key listener, no z-index arithmetic.

Anchor positioning. Position an element relative to another element, in CSS, with automatic flipping when it would overflow the viewport.

#menu {
  position-anchor: --trigger;
  top: anchor(bottom);
  left: anchor(left);
  position-try-fallbacks: flip-block, flip-inline;
}

Combined with popover, this deletes an entire dependency category. Positioning libraries exist because CSS could not do this. Now it can.

Dialog element. Modal semantics, focus management, backdrop, escape handling. Native.

View transitions. Animate between states, including across page navigations in multi-page apps.

document.startViewTransition(() => updateTheDOM());

The cross-document version means a plain server-rendered site can have smooth transitions between pages. That removes one of the last genuine advantages of client-side routing, which was always a lot of complexity for an animation.

the things to still be careful about#

Feature detection over version detection. Always.

@supports (anchor-name: --x) { /* enhanced */ }

Progressive enhancement still applies. A popover without JavaScript works. A view transition without support just does not transition, which is fine. Build so the absence degrades rather than breaks.

Check your actual audience. Baseline "widely available" means roughly thirty months across all major browsers. If you support enterprise environments with pinned browser versions, your baseline is different and you should measure it rather than assume it.

the bigger point#

The gap between "what the platform can do" and "what developers think it can do" is the widest it has ever been, and it is costing enormous amounts of unnecessary JavaScript.

A meaningful fraction of what frontend frameworks and utility libraries provide is now in the platform. Not all of it. More than most people realize.

Before you install a package to solve a UI problem, spend ten minutes checking whether CSS does it now. The answer has changed, recently, and probably more than once since you last looked.