Css

The HTML popover attribute gives you dropdown menus, tooltips, and lightweight modals using nothing but markup and CSS. No JavaScript library, no React state, no z-index: 99999 hacks. A <button popovertarget="menu"> paired with a <div popover id="menu"> handles top-layer rendering, light-dismiss on outside clicks, Escape to close, and basic focus moves. It is all built into the browser. As of 2026, the Popover API is a Baseline feature in Chrome 114+, Firefox 132+, Safari 17+, and Edge 114+, covering over 91% of browser traffic.

The short answer: build an interactive data table with semantic HTML (<table>, <thead>, <th scope="col">), add ARIA attributes (aria-sort, aria-live, aria-controls), and wire up keyboard handlers that enable sorting, filtering, and cell-by-cell navigation without a mouse. Done right, the result satisfies WCAG 2.2 Level AA, works for sighted users, screen reader users, and keyboard-only users, and needs no framework dependencies.

This guide walks through the markup, the ARIA attributes, the JavaScript event handlers, and the performance trade-offs you hit once your dataset gets large. The reference patterns come from the WAI-ARIA Authoring Practices Guide sortable table example and the grid pattern .

You can build a fully working Markdown editor with synchronized live preview using a <textarea> for input, the marked library for parsing, and a debounced input event listener that re-renders on every keystroke. The whole thing fits in under 100 lines of vanilla JavaScript and CSS, with no build tools , no framework, and no npm install. One index.html file, one CDN script tag, double-click to open in a browser, and you are writing Markdown with a rendered preview next to your cursor.

Drop @view-transition { navigation: auto; } into your stylesheet. Modern browsers will then cross-fade between same-origin page loads on their own. No SPA router, no fetch() interception, no JS framework needed. Add view-transition-name to shared elements like hero images, headings, or nav bars, and the browser morphs them between separate HTML documents. This works today in Chrome 126+, Edge 126+, and Safari 18.2+. Firefox support lands through the Interop 2026 push.

CSS subgrid lets a nested grid inherit its parent’s track sizes. Child elements inside nested components line up with the parent layout. No flat HTML, no JavaScript height math, no hardcoded min-heights. It shipped in every major browser by late 2023, sits at about 92% global usage, and is safe on any modern web project today.

Ever fought a card grid where the buttons won’t line up because one card has a longer description? Subgrid is the fix you’ve been waiting for.

Accessible web forms start with semantic HTML and use ARIA only to fill gaps native elements can’t reach. Use aria-live for error announcements and aria-describedby to link messages to fields. Following WCAG 2.2 AA ensures every user can perceive, navigate, and complete your forms using only a keyboard.

Most form accessibility failures are not caused by missing ARIA. They come from developers skipping basic HTML semantics like labels and fieldsets. Patching this damage with ARIA often makes things worse. The W3C’s first rule is simple: no ARIA is better than bad ARIA. Misapplied roles or redundant labels create noise instead of clarity.