More primitive primitives: exploring what vanilla HTML and CSS can do in 2026

I've spent the better part of two decades installing and building dependencies to do things that browsers can't, but now popovers are an HTML attribute, tooltip positioning is handled by CSS, and view transitions can animate between DOM states without JavaScript.

The particularly annoying part is how much better these native implementations are. They're faster because they are handled by the browser's rendering engine directly. They're more accessible because focus management and keyboard navigation are handled at the platform level.

Below I explore some of the more recent additions to our world of HTML & CSS, as a sort of evolving playground (but mostly to stop me from falling into the one-more-dependency trap).

Invoker commands

Invoker commands are a suite of new attributes that let buttons control dialogs and popovers without any JavaScript. Add command="show-modal" and commandfor="my-dialog" to a button, and it'll open your dialog. For popovers, use popovertarget. The browser handles all the wiring, you just connect them with IDs.

Live Demo

MDN Can I Use

tsx
<button commandfor="my-dialog">Open Dialog</button>
<button popoverTarget="my-popover">Toggle Popover</button>

<dialog id="my-dialog">
  <p>Opened declaratively!</p>
</dialog>

<div id="my-popover" popover="auto">
  Popover content
</div>

View transitions

Natively animate DOM state changes with shared element transitions. For SPAs, wrap state updates in startViewTransition() or for multi-page navigation, use pure CSS with @view-transition and the browser handles all animation timing and interpolation.

Live Demo

MDN Can I Use

/* Pure CSS for page navigation */
@view-transition {
  navigation: auto;
}

/* Define which elements to animate */
.project-card {
  view-transition-name: project-1;
}

.project-title {
  view-transition-name: project-title;
}

CSS anchor positioning

Position elements relative to other elements using pure CSS. Tooltips, dropdowns, and popovers can be positioned without JavaScript calculations.

Live Demo

MDN Can I Use

css
.anchor {
  anchor-name: --my-anchor;
}

.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  bottom: calc(anchor(top) - 0.5rem);
  left: anchor(center);
  transform: translateX(-50%);
}

Interactive SVG animation playground with Motion: make your icons delightfully bouncy